Cross Browser Ticker/Marquee

2b. Obtain the Left to Right Script

To add my simple ticker/marquee script to your web page you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called ticker.js. This version scrolls Left to Right (the appropriate direction for languages that read right to left).

var tWidth='300px'; // width (in pixels) var tHeight='25px'; // height (in pixels) var tcolour='#ffffcc'; // background colour: var moStop=true; // pause on mouseover (true or false) var fontfamily = 'arial,sans-serif'; // font for content var tSpeed=3; // scroll speed (1 = slow, 5 = fast) // enter your ticker content here (use \/ and \' in place of / and ' respectively) var content='Are you looking for loads of useful information <a href="http:\/\/javascript.about.com\/">About Javascript<\/a>? Well now you\'ve found it.'; // Simple LtoR Marquee / Ticker Script // copyright 3rd January 2006, 23rd June 2009 Stephen Chapman // permission to use this Javascript on your web page is granted // provided that all of the below code in this script (including this // comment) is used without any alteration var cps=-tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=-tSpeed"'; tick +='><div id="mq" style="position:absolute;right:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.right=(10+parseInt(tWidth))+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.right = (parseInt(mq.style.right)>(-10 - aw)) ? mq.style.right = parseInt(mq.style.right)+cps+"px": parseInt(tWidth)+10+"px";} window.onload=startticker;

You next attach the script into your web page that you wish to display your scrolling text on by adding the following code into the head section of your page.

You also need to define where the ticker/marquee is to appear in your page by adding the following code at that point in the body of your page:

Now all that remains is to customize the script to display the scrolling text that you want in the way that you want it.