Javascript: Laufticker, Position von Text merken möglich?

son gohan

Erfahrenes Mitglied
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:
<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;?&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)?'?':'?';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>
 
Zuletzt bearbeitet:
Moin,


...man:
könnte bei jedem Schritt die Tickerposition in einem Cookie speichern, und diesen in der neuen Seite zur Anfangspositionierung heranziehen.
 
Zuletzt bearbeitet:
Hi,
ich habe mir die Funktionen indexOf() http://de.selfhtml.org/javascript/objekte/string.htm#index_of und lastIndexOf()
http://de.selfhtml.org/javascript/objekte/string.htm#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:
<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;?&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)?'?':'?';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:
<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:
//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:
intPos=(get_cookie('tPos'))?Number(get_cookie('tPos')):0;

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

Anhänge

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:
//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, ;-).
 

Neue Beiträge

Zurück