asked on

javascript rolling newsticker

Hi experts,

I found a nice javascript code snippet on the web which generates a smooth newsticker.
It works find except that the text is visible beyond the border. It seems as if the overflow:hidden attribute isn't working.

Can anyone help me?
Code is below - i found it on this site: http://www.tutorials.de/forum/javascript-ajax/147562-stinknormaler-ticker-mit-schleife.html

Thanks a lot

<!--
	/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
	tNews=new Array();
 
	//°°°°°°°°°°Die News
	tNews[0]='Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!';
	tNews[1]='Der Ticker tickt jetzt nicht mehr,sondern rollt :o)';
	tNews[2]='im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert';
	tNews[3]='Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!';
 
	//°°°°°°°°°°Delimiter zwischen den einzelnen News
	tDelimiter  =' + + + ';
 
	//°°°°°°°°°°Interval in ms
	tInterval   =10;
 
	//°°°°°°°°°°Stop bei mouseover?true:false
	tStop       =true;
 
	//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
	tRepeat     =2;
 
	//°°°°°°°°°°Rahmen
	tBorder     ='1px solid #818181';
 
	//°°°°°°°°°°Breite
	tWidth      =900;
 
	//Abstand Rahmen->Inhalt (top+bottom)
	tPadding    =1;
	
	//°°°°°°°°°°°Farbe
	color = '#1B5474';
 
	//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;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="border:'+tBorder+';width:'+
	     tWidth+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;color:'+ color+';">'+
	     '<nobr><span id="ticker" style="position:relative;overflow:hidden;"'+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);
	    }
	//-->

Open in new window

Michel Plungjan

Nice one - you put the overflow on the wrong element

('<div style="overflow:hidden;border:'+tBorder+';width:'+

            document.write('<div style="overflow:hidden;border:'+tBorder+';width:'+
             tWidth+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;color:'+ color+';">'+
             '<nobr><span id="ticker" style="position:relative"'+tStop+'>'+
             tNews+'</span></nobr></div>');

Open in new window

arthrex

ASKER

Thanks for your answer,

but putting the overflow in the div didn't help eiter...

	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;color:'+ color+';">'+
	     '<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);
	    }

Open in new window

Michel Plungjan

refresh your browser?

This works for me in IE7, FF3 and Safari 4beta on XP

<div>
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
</div><table><tr><td>Ticker:</td><td>
<script>
<!--
        /* http://www.tutorials.de/forum/javascript-ajax/147562-stinknormaler-ticker-mit-schleife.html */
        /* * * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
        tNews=new Array();
 
        //°°°°°°°°°°Die News
        tNews[0]='Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!';
        tNews[1]='Der Ticker tickt jetzt nicht mehr,sondern rollt :o)';
        tNews[2]='im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert';
        tNews[3]='Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!';
 
        //°°°°°°°°°°Delimiter zwischen den einzelnen News
        tDelimiter  =' + + + ';
 
        //°°°°°°°°°°Interval in ms
        tInterval   =10;
 
        //°°°°°°°°°°Stop bei mouseover?true:false
        tStop       =true;
 
        //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
        tRepeat     =2;
 
        //°°°°°°°°°°Rahmen
        tBorder     ='1px solid #818181';
 
        //°°°°°°°°°°Breite
        tWidth      =500;
 
        //Abstand Rahmen->Inhalt (top+bottom)
        tPadding    =1;
        
        //°°°°°°°°°°°Farbe
        color = '#1B5474';
 
        //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;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;color:'+ color+';">'+
             '<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>
</td></tr></table>

Open in new window

arthrex

ASKER

Hmm.... when i try your example it works.
But I have a whole bunch of other stuff around that javascript.
I guess now I have to figure out what could mess this up.

Any ideas?

BTW: I use IE7 as well.

Michel Plungjan

could be anything from CSS to reuse of object IDs

Show the page and I'll have a look or load it into FF and look in the console

arthrex

ASKER

Ok, got it.
I delete my Doctype tag at the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why in the world does this change the behaviour of my controls???

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

arthrex

ASKER

Thanks a lot

arthrex

ASKER

Hi,

I know I already gave you the points, but I'm still looking for the wrong syntax that messed the doctype up.
Please put the doctype I pasted above in your example. Can you tell me why it doesn't work with that?

Thanks a lot

Michel Plungjan

Ok, I will try

Michel Plungjan

Not obvious
1) container div needed to be relative too
2) added px to position for FF
3) externalised the javascript to handle the validation.

// ticker.js:
        /* http://www.tutorials.de/forum/javascript-ajax/147562-stinknormaler-ticker-mit-schleife.html */
        /* * * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
        tNews=new Array();
 
        //°°°°°°°°°°Die News
        tNews[0]='Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!';
        tNews[1]='Der Ticker tickt jetzt nicht mehr,sondern rollt :o)';
        tNews[2]='im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert';
        tNews[3]='Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!';
 
        //°°°°°°°°°°Delimiter zwischen den einzelnen News
        tDelimiter  =' + + + ';
 
        //°°°°°°°°°°Interval in ms
        tInterval   =10;
 
        //°°°°°°°°°°Stop bei mouseover?true:false
        tStop       =true;
 
        //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
        tRepeat     =2;
 
        //°°°°°°°°°°Rahmen
        tBorder     ='1px solid #818181';
 
        //°°°°°°°°°°Breite
        tWidth      =500;
 
        //Abstand Rahmen->Inhalt (top+bottom)
        tPadding    =1;
        
        //°°°°°°°°°°°Farbe
        color = '#1B5474';
 
        //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;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="position:relative; overflow:hidden;border:'+tBorder+';width:'+
             tWidth+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;color:'+ color+';">'+
             '<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 +'px';
                tPos--;
            }
            tGo=setInterval('DM_ticken()',tInterval);
            }
 
XHTML file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div>
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
bla <br />
</div><table><tr><td>Ticker:</td><td>
<script type="text/javascript" src="ticker.js"></script>
</td></tr></table>
</body>
</html>

Open in new window

arthrex

ASKER

Thanks a lot.
Awesome help!!