Ein Newsticker: Ein- und Ausblenden von News mit jQuery

Nicht zuletzt durch die Apple.com-Seite ist so ein kleines Ein- und Ausblendeskript für Newsmeldungen ziemlich fein. Mit den gängigen JavaScript-Frameworks lässt sich das auch schön animieren, so dass die einzelnen Newsmeldungen wirklich dezent erscheinen und auch wieder ausgeblendet werden.Das Resultat ist visuell unaufdringlich und per jQuery leicht gebaut. Für ein aktuelles Projekt musste ich sowas eben zusammenstellen.

Erstmal das HTML

Als Grundgerüst dient eine einfache, unsortierte Liste:

<ul id="rotate">
    <li>Meldung Nr. 1</li>
    <li>Meldung Nr. 2</li>
    <li>Meldung Nr. 3</li>
</ul>

Man kann hier durchaus semantischer auszeichnen, aber für ein Beispiel reicht es erstmal.

Das Minimal-JavaScript

Wir brauchen jetzt eine rotate()-Funktion, die folgende Arbeit übernehmen soll:

  1. Die Elemente für die Ein- und Ausblendung werden ermittelt
  2. Wird ein bereits aktives Element gefunden, wird das nächste Element aktiviert
  3. Kein aktives Element gefunden (=Ursprungszustand): Erstes Element ermitteln
  4. Alle Elemente (einzeln) ausblenden
  5. Ermitteltes, aktives Element einblenden
  6. Die Funktion ruft sich selbst wieder auf

Eigentlich mag ich diese selbstaufrufenden Dinger nicht, wer weiss, wie gross der Workload für den Browserspeicher ist. Aber bei einer solchen Sache läßt sich die Rekursivität nicht verhindern. Starten wir also mit dem Grundgerüst, wir nutzen jQuery zum Selektieren, Traversieren und für die Animation.Zunächst müssen wir das eventuell aktive Element ermitteln:

function rotate(){
    // aktives element ermitteln
    var active_elem = $('#rotate li:visible');
}

Wir prüfen, ob exakt ein aktives Element vorhanden ist und ob das aktive Element das letzte seiner Reihe ist. Ist dem so, ist unser aktives Element für das Ein- und Ausblenden automatisch das erste Element der Liste:

...
// mehr als ein aktives Element oder letztes Element
if (active_elem.length != 1 || $(active_elem).next('li').length == 0) {
    // das erste element ist das aktive
    active_elem = $('#rotate li:first');
} else {
    // das naechste element ist das aktive
    active_elem = $(active_elem).next('li');
}
...

Prima, wir haben das Element ermittelt, welches wir als nächstes einblenden wollen. Vorher blenden wir aber noch brav alles aus – unabhängig davon, ob es der erste oder n-te Durchlauf der Funktion ist:

...
// alle elemente ausblenden
$('#rotate li:visible').hide();
// aktives element einblenden
$(active_elem).fadeIn('slow');
...

Schliesslich darf die Funktion sich noch selbst aufrufen:

...
window.setTimeout('rotate()', 2000);
...

Häppchenweise Verbesserung

Jetzt kann man noch ein paar kleine Verbesserungen einführen. Z. B. möchte ich beim Aufruf des Tickers gerne die Millisekunden übergeben, die zwischen den Blende-Vorgängen vergehen sollen. Weitere Verbesserungen sind denkbar:

  • Das Skript läuft nur ab, wenn das Element auch im DOM vorhanden ist
  • Das Skript erlaubt nicht nur die Millisekunden, sondern auch das ID-Attribut des zu rotierenden Elementes als Parameter im Funktionsaufruf
  • Die Funktion blendet auch langsam aus (dazu muss man Aus- und Einblenden verketten)
  • Man will natürlich noch eine No JavaScript-Variante, so dass per CSS das Layout auch mit mehreren News funktioniert.
  • News müssen nicht zwangsweise bereits im Dokument vorhanden sein, News können natürlich auch per AJAX nachgeladen werden.

Es gibt sicherlich noch weitere, intelligente Verbesserungen, für den Beispielansatz hier belasse ich es aber dabei. Hier die Funktion, komplett mit dem entsprechenden Aufruf nach dem Laden des Document Object Models:

function rotate(mseconds){
    var active_elem = $('#rotate li:visible');
    if (active_elem.length != 1 ||
        $(active_elem).next('li').length == 0) {
        active_elem = $('#rotate li:first');
    } else {
        active_elem = $(active_elem).next('li');
    }
    $('#rotate li:visible').hide();
    $(active_elem).fadeIn('slow');
    window.setTimeout('rotate('+mseconds+')', mseconds);
}

$(function(){rotate(6000);});

Ich habe ausserdem eine kleine Demo ins Netz gestellt, wo man sich alle Komponenten (HTML, CSS und Skript) einmal in Aktion ansehen kann. Also, klicken und Firebug, bzw. Quelltextanzeige anwerfen.

Dieser Beitrag wurde unter JavaScript, jQuery, Tipps & Tricks, Web-Entwicklung abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

2 Antworten auf Ein Newsticker: Ein- und Ausblenden von News mit jQuery

  1. paul sagt:

    Hallo,anstatt eine “normale” Funktion zu erstellen würde ich empfehlen ein jQuery Plugin zu schreiben. Damit ist die Wiederverwendbarkeit höher und Namenskonflikte geringer.Oder du nimmst gleich das sehr angenehme innerFade Plugin von den Medienfreunden: http://medienfreunde.com/lab/innerfade/Schöner Artikel!

  2. Oliver sagt:

    Danke für den Tipp, Paul – Du hast natürlich Recht. Mein Artikel beschreibt nicht die Königsklasse, sondern einen Quickhack. Normalerweise propagiere ich auch, solche Helferlein tiefer in das verwendete Framework einzubetten und universeller zu gestalten. Mir ging’s hier mehr um das Aufzeigen von kleinen, schlanken Basteleien, die mit jQuery so möglich sind – wie auch bei einigen anderen meiner Artikel zum Thema.Das verlinkte Plugin ist sehr nett. Es gibt sicherlich noch weitere Alternativen. Allerdings wirft das Plugin ungepackt mal eben 5 KB in die Waagschale – manchmal will ich das einfach nicht.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>