Ajaxschmiede.de

Ich habe mich an den letzten beiden Tagen mit jQuery beschäftigt, mit dem Ziel einen einfachen Live-Ticker zu erstellen. Der Ticker sollte sich mittels Buttons steuern lassen und die auszugebenden Nachrichten in div-Containern ablegen.

Die Buttons zur Steuerung entstammen der Sweetie-Icon-Gallerie. Jeder Grafik wird nach dem vollständigen Laden der Seite über jQuery ein click-Event zugewiesen.

Die Klickereignisse bewirken im Einzelnen:

• eine Nachricht zurück,
• automatischen Wechsel pausieren/fortsetzen,
• nächste Nachricht anzeigen,
• zur ersten Nachricht und
• zur letzten Nachricht gehen.

Etliche Probleme bereiteten mir die Funktionen zum Durchschalten der Nachrichten-divs. Meine ersten Versuche einen Zähler zu integrieren, brachten nicht den erwünschten Erfolg. Ich beschloss dann anders an die Sache heranzugehen. Anstatt über eine Laufvariable festzulegen auf welches Container-div ich zugreifen will, ändere ich einfach die Reihenfolge der divs innerhalb des Containers.

Beim Vorwärtsgehen wird das erste Element ans Ende des div-Containers gehangen und das neue erste div (das ehemalige zweite) angezeigt. Beim Zurückschalten wird das letzte Element angezeigt und an die erste Stelle verschoben. Um die div-Elemente zu verschieben nutze ich die jQuery-Befehle clone() und remove().

function nextNews () {
	$("#ticker_container").append( $("#ticker_container div:first").clone(true) );
	$("#ticker_container div:first").remove();
	$("#ticker").html($("#ticker_container div:first").html());
}

function preNews () {
	$("#ticker").html($("#ticker_container div:last").html());
	$("#ticker_container").prepend( $("#ticker_container div:last").clone(true) );
	$("#ticker_container div:last").remove();
}

function stopNews () {
	window.clearInterval( int_ticker );
	$("#navi #navi_pause").attr("src", "24-arrow-next.png");
	int_ticker = null;
}

Zum Aufruf des automatischen Vorwärtsgehens nutze ich die Javascript-Funktion window.setInterval(), deren Rückgabewert in der Variablen int_ticker gespeichert wird. Sobald der Ticker durch irgendein Ereignis gestoppt wird, wird int_ticker auf NULL gesetzt. Damit stelle ich sicher, dass das automatische Weiterschalten jederzeit fortgesetzt werden kann.

Das Skript in Aktion kann man in dieser Demo sehen.

In unserer Einführung zu jQuery kann man sich die Grundlagen im Umgang mit diesem Framework anschauen.