Solved

javascript rolling newsticker

Posted on 2009-03-30
12
411 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…
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…

911 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

16 Experts available now in Live!

Get 1:1 Help Now