Lauftext/Marquee selbst gemacht

[bubble]

Hi,
ich bastle grade an 'nem JavaScript, der sowas wie das <marquee>-Tag vom IE immitieren soll.
Allerdings, soll das ganze endlos durchlaufen und mit allen Browsern funktionieren.

Quasi einen Lauftext von rechts nach links wiederholend (beim marquee war ja irgendwann Ende und es gab einen "Leerraum" im Element)

Nun ist es so, dass ich das Script nicht abhängig vom CSS verändern müssen möchte. Und dafür brauch ich eine Methode um herauszufinden wie oft ich den Text "wiederholen" muss, bis das Element gefüllt ist.

Nur leider fehlt mir jeglicher Ansatz. Vielleicht ist Javascript auch der falsche Weg.

Irgendwelche Tipps?

MfG
bubble

PS: Hier mal grobe Script, welches nur meinem Wunsch entspricht,
wenn der Text sowieso breiter als das Element ist:
http://pastebin.com/s9SUjzCa

[1UnitedPower]

Nun ist es so, dass ich das Script nicht abhängig vom CSS verändern müssen möchte. Und dafür brauch ich eine Methode um herauszufinden wie oft ich den Text "wiederholen" muss, bis das Element gefüllt ist.

Du benötigst dazu nur die jeweiligen breiten des inneren Elements (der Lauftext) als auch des äußeren (der Container). Dann teilst du die Breite des Containers durch die des Lauftextes, rundest auf und addierst 1 dazu.
Dann hast du die Anzahl Lauftexte, die du aneinanderreihen musst. Ist das erste Element links rausgelaufen hängst du es am Ende wieder an.

Nur leider fehlt mir jeglicher Ansatz. Vielleicht ist Javascript auch der falsche Weg.

Irgendwelche Tipps?

MfG
bubble

PS: Hier mal grobe Script, welches nur meinem Wunsch entspricht,
wenn der Text sowieso breiter als das Element ist:
http://pastebin.com/s9SUjzCa

Warum benutzt du nicht dieses oder ein anderes, freies Skript? Ich wette darauf, dass es sowas schon als jQuery-Plugin gibt.

Grüße
-1UP

[bubble]

Du benötigst dazu nur die jeweiligen breiten des inneren Elements (der Lauftext) als auch des äußeren (der Container). [ ... ]

Auf die Idee den Text an sich in ein Element zu stecken und dessen Breite zu berechnen bin ich gar nicht gekommen. Danke für den Hinweis :D

Warum benutzt du nicht dieses oder ein anderes, freies Skript? Ich wette darauf, dass es sowas schon als jQuery-Plugin gibt.

Bin mir auch recht sicher, dass es sowas gibt. Allerdings lernt man nicht all zu viel, wenn man andere Scripts einfach verwendet. ;)

MfG
bubble

[1UnitedPower]

Bin mir auch recht sicher, dass es sowas gibt. Allerdings lernt man nicht all zu viel, wenn man andere Scripts einfach verwendet. ;)

Das ist korrekt, wenns der Übung dient, vergiss die Frage. Die Welt braucht gute Web-Designer.

viel Erfolg noch

PS: Wenn "width" dir nicht den gewünschten Wert zurück gibt, probier es mal mit "offsetWidth". Das hat mich schonmal Stunden gekostet.

[bubble]

PS: Wenn "width" dir nicht den gewünschten Wert zurück gibt, probier es mal mit "offsetWidth". Das hat mich schonmal Stunden gekostet.

Hätte es jetzt mich auch.

Funktioniert jetzt einwandfrei :)
Hier mal der komplette Code: http://pastebin.com/R4cQ2gvt
Vielleicht gibts ja noch Verbesserungshinweise :D

Und eine Frage dazu noch: Um die Last für den Interpreter gering zu halten, ist es besser window.setInterval oder window.setTimeout zu verwenden? Oder ist es egal/zu geringfügig?

MfG
bubble

[1UnitedPower]

Gute Arbeit.

Und eine Frage dazu noch: Um die Last für den Interpreter gering zu halten, ist es besser window.setInterval oder window.setTimeout zu verwenden? Oder ist es egal/zu geringfügig?

Habe da jetzt keine Daten im Kopf. Was wirklich wichtig wäre, ist dass du setTimeout keinen String mit Code übergibst, sondern den Funktionsnamen. Denn wenn du einen String übergibst wird dieser genauso wie mit "eval" ausgewertet. Und eval ist böse!

Und eine Kleinigkeit, die dir vielleicht irgendwann mal zum Verhängnis werden kann. Code-Einrückung ist in Javascript keine Geschmackssache. Man hat bei Javascript die Möglichkeit Simokolons ";" wegzulassen, diese werden dann aber vor dem eigentlichen Interpretieren automatisch ergänzt. Deshalb sollten die öffnenden geschweiften Klammern immer direkt in der Kontrollstruktur-Zeile stehen.

Sonst kann aus dem hier:

  
if (foo === bar)  
{  
   // do something  
}  

mal eben das hier werden:

  
if (foo === bar);  
{  
   // do something  
}  

ich hau mich jetzt aufs Ohr
-1UP

[Jeena Paradies]

Hallo,

Hier mal der komplette Code: http://pastebin.com/R4cQ2gvt
Vielleicht gibts ja noch Verbesserungshinweise :D

window.setTimeout("newsticker.loop()","75");

Aah du hast das so schön als Objekt gekapselt und hier benutzt du das globale Objekt window.newsticker, das ist schade, denn dann kann man nur einen Ticker auf der Seite haben und nicht mehrere unabhängige. Du solltest da eher das gerade aufgerufene Objekt nutzen, z.b. so:

setTimeout(this.loop, 75);

Ich glaube ich würde da es sich um eine Animation handelt gleich requestAnimationFrame() nutzen denn da ist eher sichergestellt dass das ganze smooth läuft, vor allem auch dass die framerate runtergeht wenn das Tab nicht angezeigt wird und so Scherze.

Damit ich das in allen Browsern nutzen kann und auch ein Fallback für die die das nicht können habe, habe ich mir das hier gebaut:

var requestAnimFrame =  (function(){  
  
    var _setTimeout = function( callback ){  
        setTimeout(callback, 1000 / 60);  
    }  
  
    if (typeof window != 'undefined') {  
  
        return  window.requestAnimationFrame       ||  
                window.webkitRequestAnimationFrame ||  
                window.mozRequestAnimationFrame    ||  
                window.oRequestAnimationFrame      ||  
                window.msRequestAnimationFrame     ||  
                _setTimeout;  
  
    } else {  
        return _setTimeout;  
    }  
  
})();

und man benutzt es dann so:

NewsTicker.prototype.loop = function()  
{  
        // Damit diese Funktion in 16 milisekunden wieder automatisch aufgerufen wird.  
        requestAnimFrame(this.loop);  
  
        if(this.container == null)  
                this.init();  
        else  
        {  
            // ...  
        }  
}

Wie im Kommentar schon geschrieben wird hier alle 16 Milisekunden aufgerufen was einer Framerate von 60 entspricht, was so standard für Animationen ist.

Falls du eine Stunde Zeit übrig hast kannst du dir mal Google I/O 2012 - Jank Busters: Building Performant Web Apps zu diesem Thema angucken.

Jeena

[misterunknown]

Moin,

Funktioniert jetzt einwandfrei :)
Hier mal der komplette Code: http://pastebin.com/R4cQ2gvt
Vielleicht gibts ja noch Verbesserungshinweise :D

In dieser Zeile:

txt += "<span class='newsticker"+(oc?"2":"1")+"'>"+this.text.substring(0,this.index)+"</span>";

ist es meines Wissens besser, wenn du die doppelten und einfachen Hochkommata tauschst. HTML verlangt prinzipiell doppelte Hochkommata. Javascript ist die Verwendung egal.

txt += '<span class="newsticker'+(oc?'2':'1')+'">'+this.text.substring(0,this.index)+'</span>';

Grüße Marco

[Der Martin]

Hallo,

HTML verlangt prinzipiell doppelte Hochkommata. Javascript ist die Verwendung egal.

du irrst dich. Auch in HTML ist beides gleichrangig erlaubt. Es hat sich zwar als Konvention eingebürgert, die doppelten zu verwenden - das ist aber kein Muss.

Ciao,
 Martin

[misterunknown]

Moin,

du irrst dich. Auch in HTML ist beides gleichrangig erlaubt. Es hat sich zwar als Konvention eingebürgert, die doppelten zu verwenden - das ist aber kein Muss.

Stimmt, nur weglassen war invalide. Sorry :)

Grüße Marco

[Der Martin]

Hi,

Auch in HTML ist beides gleichrangig erlaubt. Es hat sich zwar als Konvention eingebürgert, die doppelten zu verwenden - das ist aber kein Muss.
Stimmt, nur weglassen war invalide. Sorry :)

nicht einmal das - äh doch, oft, aber nicht immer.
XHTML fordert *immer* Anführungszeichen um Attributwerte.
HTML erlaubt das Weglassen, wenn der Attributwert nur Buchstaben und Ziffern enthält.

Aber ich empfehle trotzdem, immer konsequent Anführungszeichen zu verwenden - auch dann, wenn man sie weglassen dürfte.

Ciao,
 Martin

[Felix Riesterer]

Liebe(r) bubble,

Quasi einen Lauftext von rechts nach links wiederholend (beim marquee war ja irgendwann Ende und es gab einen "Leerraum" im Element)

da hatte ich mal was probiert... ist aber ne Weile her. Falls es nützt: Bilderticker

Liebe Grüße,

Felix Riesterer.