Box som uppdateras var 5e sekund, helst med effekt

[Peter Westerlund]

Hej,

 

Jag har ganska standardkunskaper inom javascript och ajax, men har pysslat lite smått med det iallafall så jag kan grunderna.

 

Nu skulle jag vilja bygga en lajv-meddelande-box till min sajt. Jag har tänkt mig en rektangulär box där det helatiden visar vad som händer på sajten. Om någon loggar in osv..Den ska uppdateras var 5e sekund hade jag tänkt, och vid uppdateringen vore det grymt om det kunde bli en liten effekt så det nya meddelandet kommer ned ovanfrån eller nått liknande.

 

Jag har sökt runt lite på google för att se om det finns några guider hur man gör detta. Men jag är lite osäker på vad jag ska söka på. Så det jag vill ha hjälp med med denna tråd är att få lite tips på antingen vad man kan söka på på google, eller direkta länkar till guider som gör just detta jag söker. Eller förstås om ni själva kan visa mig på nått sätt hur man gör.

 

Jag har inget emot att använda färdiga ramverk som Mootools och jQuery för att göra detta. Men skulle dock fortfarande behöva en guide då jag är nybörjare i dom ramverken också.

 

[Thomas Tydal]

Det hela består av två olika delar:

 

1. En sida som bara innehåller text med det senaste som händer på din sajt. Exempelvis, går du till sidan så visar den "Kalle loggade in."

 

2. Ett javaskript som med Ajax hämtar sidan 1. och lägger den i en div.

 

För att få 2. att köras var femte sekund använder du setTimeout().

 

För att få texten att flytta sig så använder du javaskript för att ändra divvens position (css-parametrar), och för att den ska röra sig upprepar du det med setTimeout() exempelvis att den flyttar sig 1 pixel nedåt var 50:e millisekund eller liknande.

 

 

[Peter Westerlund]

Jo, att det är två delar visste jag faktiskt redan om.

 

Okej det är så det fungerar, setTimeout(). Intressant, ska se om jag klarar av detta :/ Vore så skönt om det fanns en mer omfattande guide man kunde följa.

 

[Thomas Tydal]

Jo, att det är två delar visste jag faktiskt redan om.

 

Vad är det du inte vet om då? :-)

 

Här satte jag ihop ett litet exempel för röra text nedåt:

http://www.tydal.nu/test.html

 

 

[Peter Westerlund]

Jag hittade en ajax-funktion som jag spikade ihop för ett halvår sedan då jag senast läste hur Ajax fungerar. Denna funktion hämtar innehåll från en vald fil och skriver ut i vald element (id). Jag såg att man ju där kan bestämma tiden faktiskt, jag satte nu till 5 sekunder genom att skriva 5000.

 

function getData(dataSource, divID)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

if(XMLHttpRequestObject)
{
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
		if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
		{
		obj.innerHTML = XMLHttpRequestObject.responseText;
		}
	}
XMLHttpRequestObject.send(null);
}

setTimeout("getData('" + dataSource + "','" + divID + "');", 5000);
}

 

Nu är då frågan..

 

Varje gång den hämtar ett innehåll som är nytt, så ska den "fällas ned" ovanpå det tidigare meddelandet. Det borde gå att fixa själva animationen med hjälp av ditt exempel. Eller? Blir lite osäker nu..

 

[Jonas__B]

då måste det finnas flera element, annars kan den inte animera.

 

jag har sagt det innan, och jag säger det igen: Kolla in jQuery