nicht angemeldet
Newsticker mit LINK-funktion
Hallo!
Ich weiß, dieses Thema wurde schonmal vor kurzer Zeit angesprochen, aber leider kam dabei nix raus!!!
da mich das thema auch sehr interessiert hat hier nochmal die frage:
Ich würde gerne einen Newsticker haben (schlichter Text, von rechts nach links laufend) der die Fähigkeit besitzt das einzelne Wörter im "Newstext" mit einem Link versehen werden können.
Das ganze kann von mir aus JS, HTML, PHP, oder sonstwas sein.
vielen Dank schonmal im vorraus, thomas!
-
Hi,
Das ganze kann von mir aus JS, HTML, PHP, oder sonstwas sein.
PHP scheidet aus, weil es serverseitig läuft, und die Aktion clientseitig stattfinden muss. HTML scheidet aus, weil eine Aktion stattfinden muss. Bleibt (von den genannten Dingen; ansonsten kann es natürlich alles sein, was clientseitigen Programmcode ermöglicht - Java, Flash usw.) nur JavaScript; bzw. genauer gesagt DHTML. Ein Dreizeiler wird das nicht, nein; eher ein Fünfzigzeiler oder so.
Cheatah
-
Ein Dreizeiler wird das nicht, nein; eher ein Fünfzigzeiler oder so.
kann von mir aus auch ein 500 zeiler werden, will ja nur einen schönen anschaubaren newsticker haben... ok, ich weiß, allgemein sind newsticker nicht so beliebt, aber mir bleibt keine andere wahl, mein "auftraggeber" will halt einen... und zwar genau so einen!
-
Moin,
[Marquee in DHTML]
Ein Dreizeiler wird das nicht, nein; eher ein Fünfzigzeiler oder so.Hmm, was willst du mit diesen ganzen Zeilen?
Also du brauchst eine Zeile um die aktuelle Position auszulesen und zu erhöhen (neuX = (aktX + delta) % breite), eine Zeile um die neue Position zu setzen (document.getElementById().style.left = neuX) und eine Zeile um den erneuten Funktionsaufruf mit setTimeout anzustoßen. Dazu dann noch das übliche JavaScript-Gequassel (<script> function bla() { ... } </script>) und ein onLoad-Attribut im <body>-Element. Dann noch ein positioniertes Div im Body das den zu bewegenden Text enthält (am besten mehrfach hintereinander, wobei du dann um das erste Auftauchen ein div machst, dessen Breite du später auslesen kannst) das mit CSS als overflow: hidden; width: 100% markiert ist.Macht genau 3 Zeilen effektiven JavaScript-Code.
--
Henryk Plötz
Grüße aus Berlin-
Moin,
Ok, auf besonderen Wunsch hier also ein Beispiel. Der Wert für das onLoad-Attribut ist etwas länger geworden als ich dachte, sind also vielleicht 4 Zeilen.
--snip--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Testticker</title>
<script language="javascript" type="text/javascript"><!--
function ticker(x,w)
{
x = (x + 1) % w;
document.getElementById("ticker").style.left = (-x)+"px";
window.setTimeout("ticker("+x+","+w+")", 50);
}//--></script>
</head>
<body onLoad="ticker(0, parseInt(window.getComputedStyle(document.getElementById('ticker'),null).getPropertyValue('width'))/9);">
<div style="overflow: hidden; width:100%; white-space: nowrap;"><div id="ticker" style="position: relative; top:0px; left:0px;">bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl bal bla lab lba alb abl </div></div>
</body>
</html>
--snap--Erklärung: Zunächst einmal ist da ein div, das sozusagen als Minifenster fungiert. Mit width: 100% wird es auf die gesamte Breite des Anzeigefensters ausgedehnt. Das white-space: nowrap sorgt dafür, dass der Inhalt nicht an Leerzeichen umbricht und overflow:hidden versteckt den Teil der über die Breite hinausgeht. Innerhalb dieses Divs befindet sich der eigentliche Ticker, der am Anfang relativ auf 0,0 positioniert ist. Dadrin ist der Text der im Ticker angezeigt werden soll. Um einen kontinuierlichen Effekt zu erzielen, muß er mehrfach wiederholt werden, ich habe hier für das Beispiel 9 Wiederholungen genommen. Du solltest das so anpassen, dass der Text immer das Fenster voll ausfüllt. (Eventuell möchtest du die zusätzlichen Wiederholungen auch mit JavaScript nach dem Laden erzeugen.)
Dann ist da etwas JavaScript-Code im onLoad-Attribut. Das Monster window.getComputedStyle(document.getElementById('ticker'),null).getPropertyValue('width') gibt die aktuelle Breite des ticker-divs zurück. Mit parseInt wird daraus eine Zahl gemacht und anschließend dividiere ich die Zahl durch die Anzahl der Wiederholungen, um die Breite einer Wiederholung zu bekommen.
Dann wird ticker() aufgerufen, der Parameter x auf 0 gesetzt (sollte dem für left angegebenen Wert entsprechen) und w auf die eben berechnete Breite.
In der ersten Zeile dieser Funktion wird x um 1 Schritt erhöht und modulo der Breite gerechnet. In der zweiten Zeile wird die left-Angabe von ticker auf den negativen Wert von x gesetzt (damit sich der Text nach links bewegt) und in der dritten Zeile wird die Funktion mit den aktuellen Werten von x und w nach 50 ms wieder aufgerufen.Modifizieren kannst du den Code über das Vorzeichen von x (das ändert die Richtung), den zweiten Parameter von setTimeout (das ändert die Zeit pro Schritt) und die Zahl die zu x addiert wird (das ändert die Schrittweite; Vorsicht: wenn w nicht glatt durch diese Zahl teilbar ist, könnte es so aussehen als ob der Ticker springt).
Offensichtliche Verbesserungen: Der Code ist reines DOM, für nicht ganz so moderne Browser (IE 5/6 zum Beispiel) musst du hier und da etwas verändern. Das getComputedStyle()-Konstrukt wäre zum Beispiel nach Microsoft-Art ein document.getElementById('ticker').currentStyle.width . Ausserdem möchtest du vielleicht den document.getElementById("ticker")-Aufruf auslagern und das Ergebnis in einer globalen Variablen speichern.
--
Henryk Plötz
Grüße aus Berlin-
DANKE!!!!!!!!!!!!!
-
-
-
-
Hi Thomas,
du mußt einfach nur mal kurz mit dem Stichwort "Newsticker" googeln und wird etwa eine halbe Tonne frei verfügbare Newsticker Scripte finden - sicher auch mit den von Dir gewünschten Funktionen.
Zu beachten ist vielleicht noch, ob der Ticker mit einer Div- bzw. Layer-Technik arbeitet, oder ob er einfach die Buchstaben in einem Textfeld rotieren läßt. In letzterem (weit verbreiteten) Fall handelt es sich mehr um einen "Hüpfticker". Div-Ticker, die einen Text (pixelweise) kontinuierlich schieben sind deutlich angenehmer anzuschauen. Bei (buchstabenweise) schiebenden Hüpfticker hat man da manchmal Probleme, insbesondere dann, wenn noch ein ungünstiger Font, Schriftgröße, Farbe, Hintergrund gewählt wurde.
Ciao
Hans-Peter-
du mußt einfach nur mal kurz mit dem Stichwort "Newsticker" googeln und wird etwa eine halbe Tonne frei verfügbare Newsticker Scripte finden - sicher auch mit den von Dir gewünschten Funktionen.
OH JA!!! da gibt es tonnen von material, und tonnen MÜLL!!!
hab trotzdem was gefunden, was eigentlich ganz gut ausschaut!
hier der link, damit andere auch was von haben:
http://www.objectplanet.com/newsticker/wer aber was besseres hat, soll das mal hier posten bitte...
-