Hallo,

kann sich ein Laufticker eigentlich auch die Position vom Text merken?

Wenn man beispielweise einen Laufticker auf seiner Website hat und es wird intern eine Seite gewechselt, würde ich gerne die Position vom Text merken lassen, sodass dann wieder ab dort weiter gelaufen wird, wo vorher unterbrochen wurde durch den Seitenwechsel, ist sowas möglich?

Man könnte ja die aktuelle Textposition mit PHP an die URL als globale Variable hängen denke ich mir, und das dann vom Javascript Script wieder lesen und weiter laufen lassen, wo es vorher unterbrochen wurde, ist sowas möglich?

Ein Laufticker der mir besonders gefällt ist dieser http://www.doktormolle.de/temp/ticker5.htm

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

<script type="text/javascript"> <!-- /* * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */ tNews=new Array();   //°°°°°°°°°°Die News   tNews[0]='<b>Frisch eingetroffen:Stop/Go-Button</b>'; tNews[1]='<a href="#">im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert</a>'; tNews[2]='<a href="#">Der Ticker tickt jetzt nicht mehr sondern rollt :o)</a>'; tNews[3]='<a href="#">Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!</a>'; tNews[4]='<a href="#">Was der Ticker nicht weiss, macht den User nicht heiss</a>'; tNews[5]='<a href="#">Warum blinkt der Cursor so schnell?</a>';   //°°°°°°°°°°Delimiter zwischen den einzelnen News tDelimiter  =' + + + ';   //°°°°°°°°°°Interval in ms tInterval   =35;   //°°°°°°°°°°Stop bei mouseover?true:false tStop       =false;   //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1 tRepeat     =22;   //°°°°°°°°°°Rahmen tBorder     ='0px solid #f4f4f4';   //°°°°°°°°°°Breite tWidth      =565;   //°°°°°°°°°°Breite tHeight     =13;   //Abstand Rahmen->Inhalt (top+bottom) tPadding    =0;   //Button STOP/GO showButt   =true; buttTxt    ='#ffffff'; buttBg     ='#313131'; buttSize   ='10px';   //Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker   /* * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * */ IE=document.all&&!window.opera;DOM=document.getElementById&&!IE; if(DOM||IE)     {     var tGo;tPos=0;     tButt=showButt?'<td>&nbsp;&nbsp;</td><td onclick="stop_n_go(this);"style="color:'+buttTxt+';background-color:'+buttBg+';width:'      +buttSize+';font:'+buttSize+' \'Courier New\',Arial,\'Times New Roman\';cursor:crosshair;">&nbsp;&#x25A0;&nbsp;</td>':'';     tStop=tStop?'onmouseover="clearInterval(tGo)"onmouseout="if(st){tGo=setInterval(\'DM_ticken()\','+tInterval+');}"':'';     tTxt=tDelimiter+tNews.join(tDelimiter);tNews=tTxt;for(i=1;i<tRepeat;++i){tNews+=tTxt;}document.write     ('<table border="1"cellpadding="0"cellspacing="0"><tr><td><div style="overflow:hidden;border:'+tBorder+';width:'+      tWidth+'px;height:'+tHeight+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;">'+      '<nobr><span id="ticker"style="position:relative;"'+tStop+'>'+tNews+'</span></nobr></div>'+tButt+      '</td></tr></table>');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);sg=1;st=true;function stop_n_go(o){     st=(sg==1)?false:true;et=(sg==1)?'&#x25BA;':'&#x25A0;';sg=(sg%2)+1;o.innerHTML='&nbsp;'+et+'&nbsp;';     tGo=(sg==2)?clearInterval(tGo):setInterval('DM_ticken()',tInterval);}     } //--> </script>    <script type="text/javascript"><!--<p><font face="Arial" size="1" color="#0000FF">  wenn javascript ausgeschaltet ist soll der Tag als Ticker verwendet werden.<marquee scrollamount=1 scrolldelay=2 width="200" height="12"> </marquee></font> </p>  //--></script>

Moin,


...man:
könnte bei jedem Schritt die Tickerposition in einem Cookie speichern, und diesen in der neuen Seite zur Anfangspositionierung heranziehen.

Hi, das ist interessant, da suche ich mir mal mehr Informationen zu, besten Dank!

Hi,
ich habe mir die Funktionen indexOf() http://de.selfhtml.org/javascript/ob...g.htm#index_of und lastIndexOf()
http://de.selfhtml.org/javascript/ob...#last_index_of angeschaut und bin mir etwas unsicher ob das was bringt.

abgesehen davon fehlt mir glaub ich doch noch etwas mehr Erfahrung mit Javascript um die Funktionen dann auch so richtig ein zu setzen damit es so funktioniert wie ich es mir vorstelle.

Und vorstellen tue ich es mir so:

1. Wenn die Homepage geladen wird, wird die Position vom Text im Ticker jeweils gemerkt.
2. Wenn eine Seite gewechselt wird intern über ein hyperlink soll der Ticker jeweils die gemerkte Textposition übergeben bekommen und ab der stelle weiter laufen wo es vorher abgebrochen wurde durch seitenwechsel.

Also ein fertigen Javascript Laufticker zu finden der so funktioniert ist auch so gut wie unmöglich finde ich.

In dem Ticker gibt es ja eine Variable tPos, in dieser wird die aktuelle Position(in Ticker5 der left-Wert) gespeichert.

Man muss jetzt diese Variable nur bei jeder Änderung in einem Cookie speichern, und beim Initialisieren des Tickers die Variable wieder mit dem Wert aus dem Cookie belegen...das wars eigentlich schon.

Hier mal der Original-Ticker5 mit den erwähnten Änderungen.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

<html> <head> <title>ticker-Stop'n Go</title> <STYLE type=text/css> A{     FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial,Helvetica; TEXT-DECORATION: none } A:hover {     TEXT-DECORATION: underline } TD {     FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none } #ticker {     FONT: 11px Verdana,Geneva,Arial,Sans-Serif; COLOR: #000000; BACKGROUND-COLOR: #f4f4f4 } BODY {     SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #001d7b; SCROLLBAR-SHADOW-COLOR: #001d7b; SCROLLBAR-3DLIGHT-COLOR: #c0c0c0; SCROLLBAR-ARROW-COLOR: #001d7b; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #000000 } </STYLE> </head> <body>   <script type="text/javascript"> <!--   function get_cookie( cookieName ) {     strValue = false;       if( strCookie = document.cookie )         {             if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g')))                 {                     strValue=RegExp.$1;                 }         }     return(strValue); }   function set_cookie(cookieName,cookieValue,intDays) {     objNow = new Date();     strExp = new Date( objNow.getTime() + ( intDays * 86400000) );     document.cookie = cookieName + '=' +                       cookieValue + ';expires=' +                       strExp.toGMTString() + ';';     return true; }       /* * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */ tNews=new Array();   //?Die News   tNews[0]='<b>Frisch eingetroffen:Stop/Go-Button</b>'; tNews[1]='<a href="#">im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert</a>'; tNews[2]='<a href="#">Der Ticker tickt jetzt nicht mehr sondern rollt :o)</a>'; tNews[3]='<a href="#">Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!</a>'; tNews[4]='<a href="#">Was der Ticker nicht weiss, macht den User nicht heiss</a>'; tNews[5]='<a href="#">Warum blinkt der Cursor so schnell?</a>';   //?Delimiter zwischen den einzelnen News tDelimiter  =' + + + ';   //?Interval in ms tInterval   =5;   //?Stop bei mouseover?true:false tStop       =true;   //?Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1 tRepeat     =2;   //?Rahmen tBorder     ='0px solid #f4f4f4';   //?Breite tWidth      =565;   //?Breite tHeight     =13;   //Abstand Rahmen->Inhalt (top+bottom) tPadding    =0;   //Button STOP/GO showButt   =true; buttTxt    ='#ffffff'; buttBg     ='#313131'; buttSize   ='10px';   //Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker   /* * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * */ IE=document.all&&!window.opera;DOM=document.getElementById&&!IE; if(DOM||IE)     {     var tGo;tPos=(get_cookie('tPos'))?get_cookie('tPos'):0;     tButt=showButt?'<td>&nbsp;&nbsp;</td><td onclick="stop_n_go(this);"style="color:'+buttTxt+';background-color:'+buttBg+';width:'      +buttSize+';font:'+buttSize+' \'Courier New\',Arial,\'Times New Roman\';cursor:crosshair;">&nbsp;&#x25A0;&nbsp;</td>':'';     tStop=tStop?'onmouseover="clearInterval(tGo)"onmouseout="if(st){tGo=setInterval(\'DM_ticken()\','+tInterval+');}"':'';     tTxt=tDelimiter+tNews.join(tDelimiter);tNews=tTxt;for(i=1;i<tRepeat;++i){tNews+=tTxt;}document.write     ('<table border="0"cellpadding="0"cellspacing="0"><tr><td><div style="overflow:hidden;border:'+tBorder+';width:'+      tWidth+'px;height:'+tHeight+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;">'+      '<nobr><span id="ticker"style="position:relative;"'+tStop+'>'+tNews+'</span></nobr></div>'+tButt+      '</td></tr></table>');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;set_cookie('tPos',tPos,1);tPos--;}     tGo=setInterval('DM_ticken()',tInterval);sg=1;st=true;function stop_n_go(o){     st=(sg==1)?false:true;et=(sg==1)?'&#x25BA;':'&#x25A0;';sg=(sg%2)+1;o.innerHTML='&nbsp;'+et+'&nbsp;';     tGo=(sg==2)?clearInterval(tGo):setInterval('DM_ticken()',tInterval);}     } //--> </script>   </body> </html>

Hi, das ist ein super toller Javascript Ticker, das hätte ich bestimmt selbst nicht hinbekommen. Vielen vielen Dank.

Hi, ich habe gerade noch mal probiert ob ich den Ticker Nr.6 http://www.doktormolle.de/temp/ticker6.htm auch umgebaut bekomme mit der Cookie Function, weil dieser Ticker auch in XHTML Dokument benutzt werden kann und ich das brauche, ich kann aber die Funktion set_cookie('tPos',tPos,1); zum setzen des Cookies noch nicht richtig platzieren, den rest habe ich aber glaub ich schon richtig eingebaut:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

<script type="text/javascript"> <!--   function get_cookie( cookieName ) {     strValue = false;       if( strCookie = document.cookie )         {             if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g')))                 {                     strValue=RegExp.$1;                 }         }     return(strValue); }   function set_cookie(cookieName,cookieValue,intDays) {     objNow = new Date();     strExp = new Date( objNow.getTime() + ( intDays * 86400000) );     document.cookie = cookieName + '=' +                       cookieValue + ';expires=' +                       strExp.toGMTString() + ';';     return true; }   /* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */       //°°°°°°°°°°Die News   tNews=new Array(); tNews.push('Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!'); tNews.push('Der Ticker tickt jetzt nicht mehr, sondern rollt :o)'); tNews.push('im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert'); tNews.push('Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!'); tNews.push('<b style="color:gold">Nachtrag: Nunmehr tickt er in alle Richtungen</b>'); tNews.push('<table><tr><td><img src="http://www.tutorials.de/forum/avatars/sven%2Bmintel.gif" />'+            '</td><td>Text <br />neben<br />Bild</td></tr></table>'); tNews.push('August 2007: Dank an <a href="http://www.tutorials.de/forum/members/quaese.html">Quaese</a> '+             'f&uuml;r die Anpassungen hinsichtlich DOCTYPE-Kompatibilit&auml;t!');         //°°°°°°°°°°Laufrichtung(up,down,left,right) strDir      ='up';       //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right) strDelimiter=' + + + ';       //°°°°°°°°°°Interval in ms intInterval =50;       //°°°°°°°°°°Stop bei mouseover?true:false blnStopHover=true;       //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1 intRepeat   =2;       //°°°°°°°°°°Rahmen strBorder   ='1px solid #818181';       //°°°°°°°°°°Breite intWidth    =200;       //°°°°°°°°°°Höhe intHeight   =200;       //Abstand Rahmen->Inhalt intPadding  =4;       //Background-color strBgc      ='#515151';       //Text-color strTxtc     ='#ffffff';       //Textausrichtung strAlign    ='left';       //Schritt pro Durchlauf(px) intStep=1;     /* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */       //IE ab V4? IE=document.all&&!window.opera;     //DOM-Browser(ausser IE) DOM=document.getElementById&&!IE;     //läuft ab IE4 und in DOM-Browsern if(DOM||IE)   {         //Ermitteln, ob Ticker horizontal oder vertikal laufen soll     blnDir=(strDir=='up'||strDir=='down')?true:false;           //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet     strNobr=(blnDir)?'div':'nobr';           //Trennzeichen zwischen den Einzelnen Eintraegen         //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter         //Ansonsten Zeilenumbrueche     strDelimiter=(blnDir)?'<br><br>':strDelimiter;           //String fuer Textausrichtung bei vertikalem Ticker     strAlign=(blnDir)?'text-align:'+strAlign+';':'';           //Variable zum Speichern des Intervals     var objGo;         //Variable zum Speichern der Position     intPos=(get_cookie('tPos'))?get_cookie('tPos'):0;           //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll     strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':'';           //Tickertext zu String zusammenfuegen     strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter;     strNews=strText;     for(i=1;i<intRepeat;++i)         {         strNews+=strText;         }           //TickerCode zu String zusammenfuegen     strTicker='<div style="position: relative; '+strAlign+'overflow:hidden;background-color:'+strBgc+                     ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+                     'px;"><'+strNobr+'><div id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+                     ';"'+strStopHover+'>'+strNews+'</div></'+strNobr+'></div>';           //TickerCode im Dokument ausgeben     document.write(strTicker);           //Funktion, um Ticker ticken zu lassen     function DM_ticken()     {         //Ticker-Objekt je nach Browser ermitteln     objTicker=(IE)?document.all.ticker:document.getElementById('ticker');           //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung         //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert);     arrDir=new Array();     arrDir['up']    =new Array(-1,objTicker.offsetHeight,'top');     arrDir['down']  =new Array(1,objTicker.offsetHeight,'top');     arrDir['left']  =new Array(1,objTicker.offsetWidth,'left');     arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left');           //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items     dblOffset=arrDir[strDir][1]/intRepeat;           //Neuen Positionswert ermitteln     switch(strDir)         {         case'right':             intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;         case'left':             intPos=(intPos>0)?-dblOffset:intPos;break;         case 'up':             intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;         case 'down':             intPos=(intPos>0)?-dblOffset:intPos;break;         }           //Neuen Positionswert zuweisen     objTicker.style[arrDir[strDir][2]]=intPos + "px";           //Positionswert hoch/heruntersetzen     intPos+=intStep*arrDir[strDir][0];     }         //Erneut ticken lassen     objGo=setInterval('DM_ticken()',intInterval);   }   //--></script>

Moin,

das setzen des Cookies sollte optimalerweise hiernach passieren:

Code :

1 2	//Positionswert hoch/heruntersetzen     intPos+=intStep*arrDir[strDir][0];

Der Rest passt soweit

Es gibt da allerding im Weiteren ein Problem mit dem Cookie.
Er ist ja vom Datentyp her ein String, was irgendwo Probleme bereitet, deswegen muss er vor seiner Verwendung erst in Number umgewandelt werden:

Code :

1	intPos=(get_cookie('tPos'))?Number(get_cookie('tPos')):0;

Hab das mit den Änderungen mal hier angestöpselt.

Hi, der Ticker ist jetzt echt klasse geworden, vielen dank noch mal. Ich versuche die nächsten Tage den Ticker Nr.5 noch für XHTML benutztbar zu machen, ich denke wenn man die alle für XHTML benutztbar machen würde, wäre das doch kein Nachteil mehr heutzutage oder? Die meisten Webmaster die den Ticker auch gerne benutzen würden werden ja das gleiche Problem haben und ich denke wenn der Ticker im XHTML Dokumnet funktioniert wird er trotzdem auch immer noch im normalen HTML Dokument funktionieren oder?
Ok besten dank noch mal aufjedenfall und viele Grüße son gohan.

Ich habe beim Ticker Nr.5 versucht den text in ein string zu packen bevor ich es mit document.write() ausgebe, weil ich dachte das hier das problem liegt wieso es in XHTML nicht funktioniert:

Code :

1 2 3 4 5

//TickerCode zu String zusammenfuegen strTicker='<table border="0"cellpadding="0"cellspacing="0"><tr><td><div style="overflow:hidden;border:'+tBorder+';width:'+tWidth+'px;height:'+tHeight+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;">'+'<nobr><span id="ticker"style="position:relative;"'+tStop+'>'+tNews+'</span></nobr></div>'+tButt+'</td></tr></table>';         document.write(strTicker);

hat aber kein Unterschied gebracht zu vorher wenn ich es direkt alles mit der Funktion document.write(); ausgebe. Also da fällt mir dann doch keine Lösung ein wie ich den Ticker auf XHTML umbauen kann.

was mir aber noch übrigens aufgefallen ist und ich erwähnen wollte, ist, das wenn ich zwei von den gleichen Tickern des Typs Nr.5 untereinander lege, dann ticken beide nicht mehr, wenn ich aber nur einen habe tickt der wenigstens noch, naja wollte eigentlich mehrere untereinander legen, aber bei mir da oben tickt es auch langsam nich mehr ha,ha,ha, .

Zitat von son gohan

was mir aber noch übrigens aufgefallen ist und ich erwähnen wollte, ist, das wenn ich zwei von den gleichen Tickern des Typs Nr.5 untereinander lege, dann ticken beide nicht mehr, wenn ich aber nur einen habe tickt der wenigstens noch

Hi,

ein ID-Bezeichner (hier: "#ticker") darf im HTML-Dokument auch nur einmal vergeben werden, und der Script-Code lässt sich auch nicht ohne weiteres im Dokument "duplizieren", da die darin verwendeten Variablennamen (beginnend bei "tNews") in allen Scripts dann gleich lauten.

mfg Maik

Hi, besten dank für den Hinweis, da habe ich gar nicht dran gedacht.
Ich habe versucht beim zweiten Ticker alles neu zu bennen, jetzt läuft der obere schon mal wenigstens weiter, aber der neu definierte noch nicht, immerhin etwas hat es bewirkt. Also da muss ich mich aufjedenfall noch mal bisjen rein arbeiten in das Javascript.