DHTML / JavaScript Marquee

By: , On Tuesday, November 25th, 2008

Any one who is keen about writing valid (X)HTML knows that the marquee tag is not part of the HTML specification. So what is one to do when in need of a scrolling marquee within a valid html document? The following code demonstrates how to create a valid marquee using html, css, and javascript.

Enter the following into your HTML document:

 id="newsticker">
 id="marquee">•Item 01 •Item 02 •Item 03

Place the following into your CSS:

#marquee {
position:relative;
/*marquee left should have the same value as newsticker width*/
left:400px;
overflow:visible;
width:auto;
float:left;
white-space:nowrap;
}
#newsticker {
/*newsticker width should have the same value as marquee left*/
width:400px;
height:20px;
border-width:thin;
border-style:solid none;
border-bottom-color:#999999;
background:#FFFFFF;
margin:auto;
position:relative;
left:auto;
clear:both;
overflow:hidden;
}

Finally add the following between your script tags or into your external JavaScript file:

function startSlide(){
if(document.getElementById("marquee")){
slide();
}else{
setTimeout("startSlide()",1000);
}
}
function slide(){
/*increase timeX to slow speed, decrease it to go faster*/
var timeX=32;
var newsTick=document.getElementById("newsticker");
var myMar=document.getElementById("marquee");
var newsTickLeft=newsTick.offsetLeft;
var myMarLeft=myMar.offsetLeft;
var myMarWidth=myMar.offsetWidth;
var timer=setTimeout("slide()",timeX);
function speedTime(){
slide();
}
function slowTime(){
clearTimeout(timer);
}
newsTick.onmouseover=slowTime;
newsTick.onmouseout=speedTime;
if (myMarLeft>-myMarWidth){
myMar.style.left=myMarLeft-1+"px";
}else{
myMar.style.left=newsTick.offsetWidth+"px";
}
}
window.onload = startSlide();

Click the following link to see it in action:
Example

Get the source files by using the link below:
Download

5 Responses to “DHTML / JavaScript Marquee”

  1. zhaba Says:

    How could I position two marquees one below the other ?

    Wardell Reply:

    You would have to modify the script to accept an array of elements, or your would have to add a newsticker02 with a marquee02, and then add a new script and style rules which apply to those elements.

  2. Mosafa Says:

    so many thanks :)

  3. Mosafa Says:

    i have aprob. when i insert code to my forum .. the content of the marquee become sooo fast .. how can i solve this prob ?

    thank u.

    Wardell Reply:

    changing the value of the timeX variable from 32 to a higher value like 64 should do the trick :rock:

Loading Facebook Comments ...

© Wardell Design 2019
Entries (RSS) and Comments (RSS).