/********************************************************************** Simple marquee script By Mark Wilton-Jones 25/6/2005 *********************************************************************** Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use The tag is not part of the HTML or XHTML standards, and as a result, it is not supported cross browser. The marquee effect can be important for displaying messages on devices with small screens, or in a position on web pages where space is limited. This script produces a simple marquee effect that works cross browser without invalidating your document. In addition, the effect is accessible, and degrades gracefully in non-DOM browsers to show the text normally. To use: Inbetween the tags, put: Then wherever you want to define a marquee, use:

Marquee text

You can create multiple marquees if needed. If you want to style the marquees, style the outermost div (the script uses the inner divs to avoid box model problems). You can use multiple classes to the outer div to facilitate additional styling:

Marquee text

To stop the marquees manually, run doMStop(); You can also restart them using doDMarquee(); You can set a few options using the variables below. I have no intention of making additional options in this script. Marquees can be very annoying if used as a special effect where they are not actually needed, and I do not want to encourage their use. If you want to make additional options, you can go ahead, but I will not help you. ________________________________________________________________________________*/ var oMarquees = [], oMrunning, oMInterv = 200, //interval between increments (smoothness. Lower = More Smooth & more CPU) oMStep = 3, //number of pixels to move between increments oStopMAfter = 0, //how many seconds should marquees run (0 for no limit) oResetMWhenStop = false, //set to true to allow linewrapping when stopping oMDirection = 'left'; //'left' for LTR text, 'right' for RTL text /*** Do not edit anything after here ***/ function doMStop() { clearInterval(oMrunning); for( var i = 0; i < oMarquees.length; i++ ) { oDiv = oMarquees[i]; oDiv.mchild.style[oMDirection] = '0px'; if( oResetMWhenStop ) { oDiv.mchild.style.cssText = oDiv.mchild.style.cssText.replace(/;white-space:nowrap;/g,''); oDiv.mchild.style.whiteSpace = ''; oDiv.style.height = ''; oDiv.style.overflow = ''; oDiv.style.position = ''; oDiv.mchild.style.position = ''; oDiv.mchild.style.top = ''; } } oMarquees = []; } // Find any marquees, set their style up and store them in oMarquees[] function doDMarquee() { //If there are Marquees OR there is no document.getElementsByTagName then bail... we can't do the marquee if( oMarquees.length || !document.getElementsByTagName ) { return; } //Get all the divs into an array var oDivs = document.getElementsByTagName('div'); //define oDiv that we will use in the for loop below var oDiv; //loop through the oDivs that we collected earlier for( var i = 0; i < oDivs.length; i++ ) { //grab the current div oDiv = oDivs[i]; //if the div has a classname //and the classname is 'dmarquee' //then if( oDiv.className && oDiv.className.match(/\bdmarqueeHidden\b/) ) { oDiv.className = "dmarquee"; //if oDiv doesn't have any divs in it, then break from the loop if( !( oDiv = oDiv.getElementsByTagName('div')[0] ) ) { continue; } //assign the first child div to oDiv.mchild, if we fail, break from the loop if( !( oDiv.mchild = oDiv.getElementsByTagName('div')[0] ) ) { continue; } //****** modify the style on oDiv.mchild ******** //add white-space:nowrap to the style oDiv.mchild.style.cssText += ';white-space:nowrap;'; oDiv.mchild.style.whiteSpace = 'nowrap'; //****** modify the style on oDiv ******** //set the height of this element into the style oDiv.style.height = oDiv.offsetHeight + 'px'; oDiv.style.overflow = 'hidden'; oDiv.style.position = 'relative'; //******modify the style on mchild******** //set the child to be absolute positioned oDiv.mchild.style.position = 'absolute'; oDiv.mchild.style.top = '0px'; //set the padding on the oMDirection (left | right) to be the width of oDiv //I think that this slides the entire marquee off to the side. oDiv.mchild.style[oMDirection] = oDiv.offsetWidth + 'px'; //add this marquee to the global array of Marquees oMarquees[oMarquees.length] = oDiv; //and skip ahead past oDiv and oDiv.mchild i += 2; } } //set the interval for calling the animate function oMrunning = setInterval('aniMarquee()',oMInterv); //if there is a timeout set start a countdown timer that will shut down the marquees if( oStopMAfter ) { setTimeout('doMStop()',oStopMAfter*1000); } } //animate the amrquee function aniMarquee() { var oDiv, oPos; //loop through all the marquees for( var i = 0; i < oMarquees.length; i++ ) { //grab the innermost div in the marquee structure and save it as oDiv oDiv = oMarquees[i].mchild; //the current position is stored in th oMDirection (left | right) //of the oDiv's style... grab it. oPos = parseInt(oDiv.style[oMDirection]); //if the position is out of the marquee if( oPos <= -1 * oDiv.offsetWidth ) { // reset it oDiv.style[oMDirection] = oMarquees[i].offsetWidth + 'px'; } else { // move it by the incriment step oDiv.style[oMDirection] = ( oPos - oMStep ) + 'px'; } } } if( window.addEventListener ) { window.addEventListener('load',doDMarquee,false); } else if( document.addEventListener ) { document.addEventListener('load',doDMarquee,false); } else if( window.attachEvent ) { window.attachEvent('onload',doDMarquee); }