nicht angemeldet
Hallo,
ich möchte auf einer WebSite (genaugenommen läuft die lokal auf einem Schaufenster-PC) am unteren Bildschirmrand die News von tagesschau.de einbinden. Dafür steht auf der HTML-Seite ein Fenster mit etwa 650x100 Pixeln Größe zur Verfügung. Daher sollen die News nicht alle untereinanderweg wie auf der verlinkten Seite, sondern so, daß dort etwa 10 Sekunden lang die erste Nachricht angezeigt wird, dann 10 Sekunden lang die zweite und so weiter ... und nach der letzten soll der Feed aktualisiert werden und wieder die erste Nachricht angezeigt werden.
Ich habe mal so ein Script geschrieben und kommentiert. Das ganze nutzt nicht den umständlichen XML-Parser sondern einen Yahoo service der das XML automatisch in JSON umwandelt. Damit lässt es sich viel einfacher Hantieren.
Das Script nutzt auch die Bibliothek jQuery vor allem für die fading-Effekte. Diese wird auch von einem externen Server geladen, genauer gesagt von Google. Somit müssen wir serverseitig nichts selbst hosten.
<!doctype html>
<html>
<head>
<title>Tagesschau Ticker</title>
<!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>[code lang=javascript]
var DELAY = 1; // 10 Sekunden delay
// Yahoo bietet einen coolen Service an mit dem man feeds nach JSON umwandeln lassen kann
// und das sogar mit einer Callbackfunktion, ich habe sie hier mal 'callbackf' genannt.
// Ich habe mal eine URL gebastelt die die daten vom Tageschau-Server holt.
// Mehr dazu gibt es unter: http://developer.yahoo.com/yql/
var URL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D'http%3A%2F%2Fwww.tagesschau.de%2Fxml%2Frss2'&format=json&callback=callbackf";
// Um einen extra server zum holen der Daten zu umgehen nutzen wir Yahoos YQL service mit einer
// callback funktion. Dazu machen wir uns einen neuen script-tag und fügen ihn in den Body ein.
// Dieser läd die daten von Yahoo und ruft gleichzeitig die callbackf-Funktion auf.
function reload() {
var s = document.createElement("script");
s.src = URL;
s.id = "datascript";
document.body.appendChild(s);
}
// Wenn das HTML geladen ist dann können wir die funktion reload() zum ersten mal aufrufen
$(document).ready(reload);
// Wird vom Script aufgerufen das von Yahoo kommt. Es werden die Daten des Feeds im JSON
// Format übergeben.
function callbackf(data)
{
// Damit der Speicher nicht voll läuft wenn das den ganzen Tag im Schaufenster läuft
// machen wir das script-tag mal weg, brauchen wir ja nicht mehr
$("#datascript").remove();
// Die items sind ja etwas tiefer im JSON drinn, die speichern wir mal in einer neuen Variable
var items = data.query.results.item;
// Ich mache es mir hier einfach und baue den Inhalt komplett in einen String den ich dann mit
// innerHTML() einfüge, das ist so weit erst mal übersichtlicher und geht geht fast
// genauso schnell.
var content = "";
for (var i = 0; i < items.length; i++)
{
content += "<li>";
content += "<h1>" + items[i].title + "</h1>";
content += "<p>" + items[i].description + "</p>";
content += "</li>";
}
// Hier setzen wir den content ins <ul> rein
$("#list").html(content);
// Hier verstecken wir jedes <li> damit alle erst mal unsichtbar sind
$("#list li").each(function (i, elem)
{
$(elem).hide();
});
// Hier zeigen wir das erste <li> mit einem fade-effekt an. Wenn dieser effekt fertig
// ist rufen wir die Funktion showNext() als callback auf (siehe dazu die jQuery doku für fadeIn())
$("#list li:first-child").fadeIn("slow", showNext);
}
// Diese funktion fadet das sichtbare <li> aus, entfernt es aus dem dom und fadet das nächste
// element ein.
function showNext()
{
var first_child = $("#list li:first-child");
// Die jQuery-delay() funktion wartet mit der ausführung des nächsten so lange wie
// in DELAY angegeben. Danach fird fadeOut() aufgerufen, sobald das fertig ist
// wird die hier angegebene namenlose callback-funktion aufgerufen
first_child.delay(DELAY).fadeOut('slow', function() {
// Erst entfernen wir das erste <li>
first_child.remove();
// dann holen wir uns das jetzt neue erste element (weil das andere ja weg ist)
var next_child = $("#list li:first-child");
if (next_child.length > 0)
{
// Wenn es noch ein Element in der <ul> gibt dann wird das reingefadet und
// wenn fertig die funktion showNext() wieder aufgerufen.
next_child.fadeIn('slow', showNext);
}
else
{
// Falls keine <li>s mehr zur Verfügung stehen starten wir das Script wieder von vorne
reload();
}
});
}
</script>
<style type="text/css">
~~~css
/* Das CSS muss natürlich noch an die jeweiligen Bedürfnisse angepasst werden */
* { margin: 0; padding: 0; }
body { font-family: "Lucida Grande", Helvetica, sans-serif; }
ul { list-style-type: none; }
li { position: absolute; top: 0; left: 0; width: 650px; }
</style>
</head>
<body>
<ul id="list">
<!-- Dies hier ist unser Container in den wir alle Daten reinladen werden. -->
</ul>
</body>
</html>
[/code]
Jeena
--
[Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)
Gunnar Bittersmann