Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

javascript rolling newsticker

Posted on 2009-03-30
12
Medium Priority
?
419 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

704 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