Ergebnis 1 bis 8 von 8
Like Tree2Likes
  • 1 Post By mikdoe
  • 1 Post By hs1974

Thema: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

  1. #1
    hs1974 ist offline Grünschnabel
    registriert
    15-02-2015
    Beiträge
    4

    [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Hallo zusammen!

    Eins vorweg: ich bin generell im Bereich Webdesign nur bedingt "versiert" und, was Javascript angeht, noch wesentlich uninformierter. Vielleicht rührt daher auch das folgende Problem:
    Benötigt wird ein Endlos-Ticker, der den anzuzeigenden Text nahtlos über den Bildschirm laufen lässt, und nicht, wie bei den Meisten Tickern, die man als Code im Netz findet, den Text einmal komplett durchlaufen lässt und ihn wieder neu startet, wenn die Zeile "geleert" ist.
    Das angehängte Script - nach langer Suche gefunden - soll diesen Effekt erzielen - tut das Ganze aber nur unter Html. Sobald eine neuere Version verwendet wird (in meinem Falle wäre das Html5) steht der Ticker. Wieso? Keine Ahnung. Da greift dann wieder mein Unwissen in Sachen Javascript.

    Sobald ich den einleitenden html-Tag ändere bewegt sich nix mehr:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    oder

    Code:
    <!Doctype html>
    Kann man das Script so anpassen, daß es auch unter einem aktuellen Doctype lauffähig wird?

    Hier der (unter html) lauffähige Code:

    Code:
    <html>
    <head>
    <title>Ticker</title>
    <style type="text/css">
    <!--
    #ticker {
    	color: #000;
    	background-color: #fff;
    	font-family: Arial, Helvetica, Sans-Serif;
    	font-size: 13px;
    }
    
    -->
    </style>
    </head>
    
    <body >
    <script type="text/javascript">
    tNews=new Array();
    tNews[0]='Aaaaaaaaaa';
    tNews[1]='Bbbbbbbbbb';
    tNews[2]='Cccccccccc';
    
    tDelimiter  =' +++ ';
    tInterval   =20;
    tStop       =true;
    tRepeat     =10;
    tBorder     ='0px';
    tWidth      =1000;
    tPadding    =0;
    
    IE=document.all&&!window.opera;DOM=document.getElementById&&!IE;
    if(DOM||IE)
        {
        var tGo;
    	tPos=0;
    	tStop=tStop?'onmouseover="clearInterval(tGo)"'+'onmouseout="tGo=setInterval(\'DM_ticken()\','+tInterval+')"':'';
        tTxt=tDelimiter+tNews.join(tDelimiter);tNews=tTxt;
        for(i=1;i<tRepeat;++i){tNews+=tTxt;}
    	document.write
        ('<div style="overflow:hidden;border:'+tBorder+';width:'+tWidth+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;">'+'<nobr><span id="ticker"style="position:relative;"'+tStop+'>'+tNews+'</span></nobr></div>');
        tObj=IE?document.all.ticker:document.getElementById('ticker');
        function DM_ticken()
    	{   tOffset=tObj.offsetWidth/tRepeat;
            if(Math.abs(tPos)>tOffset)
    	      {tPos=0;}
    	    tObj.style.left=tPos;tPos--;
    	}
        tGo=setInterval('DM_ticken()',tInterval);
        }
    </script>
    </body>
    </html>
    Danke schonmal vorab für Eure Hilfe!

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Zitat Zitat von hs1974 Beitrag anzeigen
    Benötigt wird ein Endlos-Ticker, der den anzuzeigenden Text nahtlos über den Bildschirm laufen lässt, und nicht, wie bei den Meisten Tickern, die man als Code im Netz findet, den Text einmal komplett durchlaufen lässt und ihn wieder neu startet, wenn die Zeile "geleert" ist.
    Was genau ist der Unterschied zwischen "neu nach leer" und "nahtlos"?

    Zitat Zitat von hs1974 Beitrag anzeigen
    tut das Ganze aber nur unter Html. Sobald eine neuere Version verwendet wird (in meinem Falle wäre das Html5) steht der Ticker. Wieso?
    Hast du mal geschaut, ob was in der Konsole steht (F12)?

    Dein unterer Code ist übrigens nicht zwingend HTML5, weil er garkeine DocType hat. Setz mal diese Zeile ganz an den Anfang, um wirklich HTML5 zu erreichen: <!DOCTYPE HTML>
    Und damit schau mal, ob es läuft und wenn nicht, was in der Konsole steht. Konsolen sind brauchbar im IE, Firefox und Chrome. Jeweils neueste Desktop Version.
    hs1974 likes this.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    hs1974 ist offline Grünschnabel
    registriert
    15-02-2015
    Beiträge
    4

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Der Unterschied zwischen "nahtlos" und "neu nach leer": Bei nahtlos gibt's keine Lücken, die gesamte darzustellende Breite ist immer mit Text gefüllt (so wie das in diesem Fall gewünscht ist), bei "neu nach leer": Der Text läuft von rechts ins Bild, läuft einmal über den Bildschirm bis er links verschwindet - die Zeile ist dann leer, und das Ganze fängt wieder von vorne an. So liefern das eigentlich alle bisher von mir gefundenen Ticker, genauso wie das <marquee>-Tag. Bis auf den hier vorgestellten haben alle Nahtlos-Ticker den Nachteil, daß sie links einen Buchstaben abschneiden und ihn am Ende anfügen, also auch sichtbar "ticken" und nicht "scrollen".

    Das mit dem Doctype ist ja das "Grundproblem": Wenn ich einen deklariere läuft nix mehr. Nur bei "reinem" <html> läuft der Ticker. Wieso, entzieht sich meinem Verständnis. Der Blick in die Konsole (Danke für den Tipp!) sagt in dem Fall, daß <!Doctype html> deklariert ist: "Fehler beim Verarbeiten des Wertes für 'left'. Deklaration ignoriert." Das hilft mir als JS-Dummy aber nicht wirklich weiter ...

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Zitat Zitat von hs1974 Beitrag anzeigen
    Der Unterschied zwischen "nahtlos" und "neu nach leer":..
    OK, verstanden.

    Zitat Zitat von hs1974 Beitrag anzeigen
    Das mit dem Doctype ist ja das "Grundproblem": Wenn ich einen deklariere läuft nix mehr. Nur bei "reinem" <html> läuft der Ticker.
    Das nennt sich Quirksmodus des Browsers, da wird auf Teufel komm raus versucht auszuführen, was nur geht. Egal nach welchen Regeln. Garnicht zu empfehlen!
    Bitte nachlesen: Quirks-Modus

    Zitat Zitat von hs1974 Beitrag anzeigen
    "Fehler beim Verarbeiten des Wertes für 'left'. Deklaration ignoriert." Das hilft mir als JS-Dummy aber nicht wirklich weiter ...
    Das dürfte sich auf tObj.style.left=tPos; beziehen. Lass dir vor dem Kommando mal mit console.debug(tPos); anzeigen, was da zugewiesen werden soll.

    Kann auch an tObj=IE?document.all.ticker:document.getElementById('ticker'); liegen. Das ist eine Browserweiche für uralt Zeugs. Ich bin unsicher, ob document.write sauber in das DOM einfügt. Ich glaube eher nicht, und somit scheitert document.getElementById('ticker') und deshalb kann kein .style.left zugewiesen werden. Ein ziemlich unschönes Script hast du da gefunden.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    hs1974 ist offline Grünschnabel
    registriert
    15-02-2015
    Beiträge
    4

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Naja, das Script soll ja auf einer <!DOCTYPE html>-deklarierten Seite laufen, insofern: Quirks war mir neu, ist aber in der Tat nichx erstrebenswertes.

    Zum Thema "unschön": Das kommt mir langsam auch so vor - aber, wie gesagt: Im Grunde das einzig praktikable, das ich im Netz gefunden hab.
    Momentan hab ich das (leicht angepasste) Marquee-script von dynamic drive laufen, das sauber funktioniert, aber eben die Zeile einmal durchläuft und dann wieder neu startet.

    Wenn ich die Arbeitsweise des "unschönen" scripts richtig verstehe, wird da doch eigentlich nur laufend der darzustellende Text hinten angefügt, damit das, was durch's Fenster läuft, quasi "nie endet".
    Code:
     tTxt=tDelimiter+tNews.join(tDelimiter);tNews=tTxt;
        for(i=1;i<tRepeat;++i){tNews+=tTxt;}
    Aktuell läuft dieses Script:
    Code:
    /*
    Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
    Credit MUST stay intact
    */
    
    var marqueewidth="1054px";
    var marqueeheight="26px";
    var marqueespeed=2;
    var marqueebgcolor="#fff";
    var topmargin="";
    var textcolor="#000";
    var pauseit=1;
    
    
    marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var iedom=document.all||document.getElementById
    
    if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px;">'+marqueecontent+'</span>')
    var actualwidth=''
    var cross_marquee, ns_marquee
    
    function populate(){
    if (iedom){
    cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
    cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
    cross_marquee.innerHTML=marqueecontent
    actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
    }
    else if (document.layers){
    ns_marquee=document.ns_marquee.document.ns_marquee2
    ns_marquee.left=parseInt(marqueewidth)+8
    ns_marquee.document.write(marqueecontent)
    ns_marquee.document.close()
    actualwidth=ns_marquee.document.width
    }
    lefttime=setInterval("scrollmarquee()",20)
    }
    window.onload=populate
    
    function scrollmarquee(){
    if (iedom){
    if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
    cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
    else
    cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
    
    }
    else if (document.layers){
    if (ns_marquee.left>(actualwidth*(-1)+8))
    ns_marquee.left-=copyspeed
    else
    ns_marquee.left=parseInt(marqueewidth)+8
    }
    }
    
    if (iedom||document.layers){
    
    with (document){
    if (iedom){
    write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';margin-top:'+topmargin+';overflow:hidden">')
    write('<div style="z-index:1999;font:bold 14px Verdana,Arial,Helvetica;position:absolute;color:'+textcolor+';width:'+marqueewidth+';height:'+marqueeheight+';line-height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
    write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
    
    write('</div>')
    }
    else if (document.layers){
    write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
    write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
    write('</ilayer>')
    }
    }
    }
    mit dem simplen Aufruf
    Code:
    <script language='JavaScript'>
    	var marqueecontent='<nobr>Tickertext</nobr>';
    </script>
    Wär's nicht möglich in dieses Script das wiederholte Anhängen einzubinden, damit der Endlos-Effekt erreicht wird? Ich hab's selber schon mit den oben zitierten Scriptzeilen versucht aber - war nix.

    Ach - und, off topic: Bei meiner Suche nach Ticker-Scripten ist mir aufgefallen, daß fast immer ziemlich schnell (manchmal auch nur) der Hinweis kam: Tickertexte benutzt man nicht, das is veraltet, das is nich schön für's Auge. Sehr angenehm, daß man hier tatsächlich beim eigentlichen Problem hilft, statt die Grundsatzfrage zu diskutieren, ob man "sowas macht".
    mikdoe likes this.

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Nicht eingerückter Code ist gruselig und viel zu zeitaufwendig zu lesen. Wenn du aus dem Code aus #1 ein schön eingerücktes Fiddle machen würdest könnte man da mit erheblich weniger Zeitaufwand helfen. Wir müssen ja erstmal schauen, dass wir das nach HTML 5 heben, danach kannst du das alte durch das neue ersetzen. Ich würde jetzt nicht hingehen, aus einem nicht wunschgemäß funktionierenden Script Teile raus zu ziehen.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  7. #7
    hs1974 ist offline Grünschnabel
    registriert
    15-02-2015
    Beiträge
    4

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Sorry, hoffe so ists besser

    Code:
    /*
    Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
    Credit MUST stay intact
    */
    var marqueewidth = "1054px";
    var marqueeheight = "26px";
    var marqueespeed = 2;
    var marqueebgcolor = "#fff";
    var topmargin = "";
    var textcolor = "#000";
    var pauseit = 1;
    
    
    marqueespeed = (document.all) ? marqueespeed : Math.max(1, marqueespeed - 1) //slow speed down by 1 for NS
    var copyspeed = marqueespeed
    var pausespeed = (pauseit == 0) ? copyspeed : 0
    var iedom = document.all || document.getElementById
    
    if (iedom)
        document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px;">' + marqueecontent + '</span>')
    var actualwidth = ''
    var cross_marquee, ns_marquee
    
    function populate() {
        if (iedom) {
            cross_marquee = document.getElementById ? document.getElementById("iemarquee") : document.all.iemarquee
            cross_marquee.style.left = parseInt(marqueewidth) + 8 + "px"
            cross_marquee.innerHTML = marqueecontent
            actualwidth = document.all ? temp.offsetWidth : document.getElementById("temp").offsetWidth
        } else if (document.layers) {
            ns_marquee = document.ns_marquee.document.ns_marquee2
            ns_marquee.left = parseInt(marqueewidth) + 8
            ns_marquee.document.write(marqueecontent)
            ns_marquee.document.close()
            actualwidth = ns_marquee.document.width
        }
        lefttime = setInterval("scrollmarquee()", 20)
    }
    window.onload = populate
    
    function scrollmarquee() {
        if (iedom) {
            if (parseInt(cross_marquee.style.left) > (actualwidth * (-1) + 8))
                cross_marquee.style.left = parseInt(cross_marquee.style.left) - copyspeed + "px"
            else
                cross_marquee.style.left = parseInt(marqueewidth) + 8 + "px"
    
        } else if (document.layers) {
            if (ns_marquee.left > (actualwidth * (-1) + 8))
                ns_marquee.left -= copyspeed
            else
                ns_marquee.left = parseInt(marqueewidth) + 8
        }
    }
    
    if (iedom || document.layers) {
    
        with(document) {
            if (iedom) {
                write('<div style="position:relative;width:' + marqueewidth + ';height:' + marqueeheight + ';margin-top:' + topmargin + ';overflow:hidden">')
                write('<div style="z-index:1999;font:bold 14px Verdana,Arial,Helvetica;position:absolute;color:' + textcolor + ';width:' + marqueewidth + ';height:' + marqueeheight + ';line-height:' + marqueeheight + ';background-color:' + marqueebgcolor + '" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
                write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
    
                write('</div>')
            } else if (document.layers) {
                write('<ilayer width=' + marqueewidth + ' height=' + marqueeheight + ' name="ns_marquee" bgColor=' + marqueebgcolor + '>')
                write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
                write('</ilayer>')
            }
        }
    }

  8. #8
    Sempervivum ist offline Banned
    registriert
    11-12-2012
    Beiträge
    555

    AW: [JavaScript ]Ticker-Script läuft nicht unter XHtml/Html5

    Habe jetzt die ganze Diskussion nur überflogen, aber vielleicht hilft Dir dies: Die Skripts von Dynamic Drive sind häufig veraltet, was bei deinem ja offensichtlich ist, wenn es nicht unter HTML5 läuft. Probier doch stattdessen mal dieses:
    jQuery simplyScroll - Logicbox
    Es ist eigentlich dafür gemacht, Bilder zu sliden, unterstützt aber beliebigen HTML-Content. Probier's mal mit Texten aus.
    Edit: Kurze Suche nach "jQuery seamless ticker" führt zu diesem:
    http://jonmifsud.com/open-source/jqu...ery-webticker/
    Der slidet ebenfalls ohne Lücke, wie man an der Demo sieht.
    Geändert von Sempervivum (21-02-2015 um 12:24 Uhr)

Ähnliche Themen

  1. Script läuft im IE aber nicht unter FF
    Von Languste im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 10-01-2008, 17:51
  2. Antworten: 8
    Letzter Beitrag: 19-06-2007, 23:51
  3. Javascript unter Mozilla läuft nicht (aber unter IE)
    Von Thirdheaven im Forum JavaScript
    Antworten: 16
    Letzter Beitrag: 11-05-2007, 01:47
  4. Antworten: 7
    Letzter Beitrag: 23-10-2005, 16:59
  5. Script läuft nicht unter Netscape
    Von Mad Jack im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 31-03-2003, 10:47

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •