Solved

javascript rolling newsticker

Posted on 2009-03-30
12
417 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…
Suggested Courses

623 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