Solved

javascript rolling newsticker

Posted on 2009-03-30
12
405 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:arthrex
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 75

Accepted Solution

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

Author Closing Comment

by:arthrex
Comment Utility
Thanks a lot
0
 

Author Comment

by:arthrex
Comment Utility
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
Comment Utility
Ok, I will try
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
Thanks a lot.
Awesome help!!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

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. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now