Solved

javascript rolling newsticker

Posted on 2009-03-30
12
414 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:arthrex
  • 6
  • 6
12 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24018041
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

0
 

Author Comment

by:arthrex
ID: 24018281
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

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24018324
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

0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

Author Comment

by:arthrex
ID: 24018462
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24018500
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
0
 

Author Comment

by:arthrex
ID: 24018503
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???
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24018547
Many reasons...
Invalid attributes, script not in CDATA and so on
0
 

Author Closing Comment

by:arthrex
ID: 31564288
Thanks a lot
0
 

Author Comment

by:arthrex
ID: 24019091
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24019121
Ok, I will try
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24019295
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

0
 

Author Comment

by:arthrex
ID: 24019983
Thanks a lot.
Awesome help!!
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question