1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:37 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Need help creating a marquee/ticker

Horizontal marquee

         

Trace

1:42 pm on Jun 1, 2007 (gmt 0)

10+ Year Member



I'm trying to create a horizontal marquee that has text scrolling from right to left.

Here's what I've managed so far...

<html>
<head>
<script type="text/javascript">
var marqueecontent='<nobr><font face="Arial">Lorem ipsum dolor sit amet</font></nobr>';
var copyspeed=2;
var actualwidth='';
var jsMarquee;
var tickerWidth = 300;
document.write('<span id="temp" style="visibility:hidden;">'+marqueecontent+'</span>');

function populate(theDiv){
jsMarquee=document.getElementById(theDiv);
jsMarquee.style.left=parseInt(tickerWidth)+8+"px";
jsMarquee.innerHTML=marqueecontent;

actualwidth=document.getElementById("temp").offsetWidth;
}

function scrollmarquee(marqueeToScroll){
if (parseInt(marqueeToScroll.style.left)>(actualwidth*(-1)+8)){
marqueeToScroll.style.left=parseInt(marqueeToScroll.style.left)-copyspeed+"px";
}else{
marqueeToScroll.style.left=parseInt(tickerWidth)+8+"px";
}
}

setInterval("scrollmarquee(jsMarquee)",20)
</script>

</head>

<body onload="populate('marquee1')">

<div style="position:relative;width:300px;height:25px;overflow:hidden">
<div style="position:absolute;width:300px;height:25px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed=2">
<div id="marquee1" style="position:absolute;left:0px;top:0px;"></div>
</div>
</div>

</body>
</html>

That works the way it's supposed to. What I want now, is no blank space between loops. I want the message to be back to back - with no white space in between.

I've tried several different approaches using multiple layers - but I just get confused after a while and end up starting over again.

Can anyone give me a hand with this?

Trace

6:25 pm on Jun 1, 2007 (gmt 0)

10+ Year Member



This is how far I've gotten;


<script type="text/javascript">
var marqueecontent='<nobr><font face="Arial">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </font></nobr>';
var copyspeed=2;
var actualWidth='';
var jsMarquee1;
var jsMarquee2;
var tickerWidth = 300;
var divStatus = 0;
var div1Status = 0;
var div2Status = 0;
document.write('<span id="temp" style="visibility:hidden;">'+marqueecontent+'</span>');

function populate(){
// first DIV
jsMarquee1=document.getElementById('marquee1');
jsMarquee1.style.left=parseInt(tickerWidth)+8+"px";
jsMarquee1.innerHTML=marqueecontent;

// second DIV
jsMarquee2=document.getElementById('marquee2');
jsMarquee2.style.left=parseInt(tickerWidth)+8+"px";
jsMarquee2.innerHTML=marqueecontent;

actualWidth=document.getElementById("temp").offsetWidth;
timeToStartSecond=(tickerWidth-actualWidth); // <-- where the second div needs to start
timeToStartSecondAlt=((tickerWidth-actualWidth)-1); // <-- fix for odd number
}
window.onload=populate

function scrollMarquee(){
if ((parseInt(jsMarquee1.style.left)>(actualWidth*(-1)+8))){
jsMarquee1.style.left=parseInt(jsMarquee1.style.left)-copyspeed+"px";

// call function to begin the second DIV
if((parseInt(jsMarquee1.style.left) == timeToStartSecond ¦¦ parseInt(jsMarquee1.style.left) == timeToStartSecondAlt) && divStatus == 0){
beginSecondMarquee();
divStatus = 1;
}

div1Status = 0;
}else{
// move the div back to start position
if(div1Status == 0){
document.getElementById("marquee1").style.left = parseInt(actualWidth)+24+"px";
div1Status = 1;
}
}
}

function scrollSecondMarquee(){
if (parseInt(jsMarquee2.style.left)>(actualWidth*(-1)+8)){
jsMarquee2.style.left=parseInt(jsMarquee2.style.left)-copyspeed+"px";

div2Status = 0;
}else{
// move the div back to start position
if(div2Status == 0){
document.getElementById("marquee2").style.left = parseInt(actualWidth)+24+"px";
div2Status = 1;
}
}
}

function beginSecondMarquee(){
setInterval("scrollSecondMarquee()",20);
}

function startMarquee(){
setInterval("scrollMarquee()",20);
}

// start scrolling the first div
startMarquee();

document.write('<div style="position:relative;width:300px;height:25px;overflow:hidden">');
document.write('<div style="position:absolute;width:300px;height:25px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed=2">');
document.write('<div id="marquee1" style="border:1px solid red; position:absolute;left:0px;top:0px;"></div>');
document.write('<div id="marquee2" style="border:1px solid blue; position:absolute;left:0px;top:0px;"></div>');
document.write('</div>');
document.write('</div>');
</script>

That's a nice big pile of doggy-do right there... but it's doing what it's supposed to.

If anyone could clean it up - make it better, that would be awesome.

birdbrain

12:06 pm on Jun 2, 2007 (gmt 0)



Hi there Trace,

have a look at this example, it may give you some ideas... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tickerness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-color:#333;
 }
#container {
 position:relative;
 border-top:5px solid #000; 
 border-right:5px solid #666; 
 border-bottom:5px solid #666; 
 border-left:5px solid #000; 
 background-color:#defdd9;
 width:500px;
 height:60px;
 overflow:hidden;
 margin:60px auto;
 }
#ticker0,#ticker1 {
 position:absolute;
 left:0;
 width:592px;
 height:60px;
 line-height:60px;
 font-family:verdana,arial,helvetica,sans-serif;
 font-size:16px;
 text-align:center
 }
#ticker1 {
 left:592px;
 }
</style>
<script type="text/javascript">
 var obj0;
 var obj1;
 var obj2;
 var i=0;
 var j=592  /*this is the text width*/
 var speed=25;  /*this is the scroll speed*/
 
function imgScroll() {
 obj0.left=i+'px';
 obj1.left=j+'px';
  
 i--;
 j--;
if(i<-591) {
 i=592;
 }
if(j<-591) {
 j=592;
 } 
 scroller=setTimeout('imgScroll()',speed);
 }
window.onload=function() {
 obj0=document.getElementById('ticker0').style;
 obj1=document.getElementById('ticker1').style;
 obj2=document.getElementById('container');
 imgScroll();
 obj2.onmouseover=function(){
 clearTimeout(scroller);
 }
 obj2.onmouseout=function(){
 imgScroll();
 }
 }
</script>
</head>
<body>
<div id="container">
<div id="ticker0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. 
</div>
<div id="ticker1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. 
</div>
</div>
</body>
</html>

birdbrain

Trace

2:24 pm on Jun 4, 2007 (gmt 0)

10+ Year Member



Thanks a bunch. That's pretty clean looking and it has in fact given me some ideas. The first problem I see right away with yours is that I don't get the desired effect when the text is shorter than the actual ticker.

I had the same problem with mine, and here's how I worked around it.


<script type="text/javascript">

// global variables
var marqueecontent='<font face="Arial">Lorem ipsum </font>';
var copyspeed=2; // <-- speed of ticker
var tickerWidth = 300; // <-- ticker width

var actualWidth='';
var jsMarquee1;
var jsMarquee2;
var divStatus = 0;
var div1Status = 0;
var div2Status = 0;

document.write('<span id="temp" style="visibility:hidden;">'+marqueecontent+'</span>'); // used to determine initial content width
document.write('<span id="temp2" style="visibility:hidden;"></span>'); // used later to calculate the new width of the content

function populate(){
actualWidth=document.getElementById("temp").offsetWidth;
actualWidthTemp=document.getElementById("temp").offsetWidth;

// first DIV
jsMarquee1=document.getElementById('marquee1');
jsMarquee1.style.left=parseInt(tickerWidth)+8+"px";

// second DIV
jsMarquee2=document.getElementById('marquee2');
jsMarquee2.style.left=parseInt(tickerWidth)+8+"px";

if(actualWidth <= tickerWidth){
var tempContent;
tempContent = "<nobr>";

// make sure that the div is larger than the ticker area
// if not, duplicate the content
while (actualWidth < tickerWidth){
tempContent = tempContent + marqueecontent;
actualWidth = actualWidth + actualWidthTemp;
}
tempContent = tempContent + "</nobr>"

// load the content into the divs
jsMarquee1.innerHTML=tempContent;
jsMarquee2.innerHTML=tempContent;

// get the new actual width of the content
document.getElementById("temp2").innerHTML=tempContent;
actualWidth = document.getElementById("temp2").offsetWidth;

}else{
// load the content into the divs
jsMarquee1.innerHTML="<nobr>"+marqueecontent+"</nobr>";
jsMarquee2.innerHTML="<nobr>"+marqueecontent+"</nobr>";
}

timeToStartSecond=(tickerWidth-actualWidth); // <-- where the second div needs to start
timeToStartSecondAlt=((tickerWidth-actualWidth)-1); // <-- fix for odd numbers
}
window.onload=populate

function scrollMarquee(){
if ((parseInt(jsMarquee1.style.left)>(actualWidth*(-1)+8))){
jsMarquee1.style.left=parseInt(jsMarquee1.style.left)-copyspeed+"px";

// call function to begin the second DIV
if((parseInt(jsMarquee1.style.left) == timeToStartSecond ¦¦ parseInt(jsMarquee1.style.left) == timeToStartSecondAlt) && divStatus == 0){
beginSecondMarquee();
divStatus = 1;
}
div1Status = 0;
}else{
// move the div back to start position and resets it's status
if(div1Status == 0){
document.getElementById("marquee1").style.left = parseInt(actualWidth)+24+"px";
div1Status = 1;
}
}
}

function scrollSecondMarquee(){
if (parseInt(jsMarquee2.style.left)>(actualWidth*(-1)+8)){
jsMarquee2.style.left=parseInt(jsMarquee2.style.left)-copyspeed+"px";
div2Status = 0;
}else{
// move the div back to start position and resets it's status
if(div2Status == 0){
document.getElementById("marquee2").style.left = parseInt(actualWidth)+24+"px";
div2Status = 1;
}
}
}

/* begins the second marquee */
function beginSecondMarquee(){
setInterval("scrollSecondMarquee()",20);
}

/* begins the first marquee */
function startMarquee(){
setInterval("scrollMarquee()",20);
}
startMarquee();

document.write('<div style="position:relative;width:300px;height:25px;overflow:hidden">');
document.write('<div style="position:absolute;width:300px;height:25px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed=2">');
document.write('<div id="marquee1" style="position:absolute;left:0px;top:0px;"></div>');
document.write('<div id="marquee2" style="position:absolute;left:0px;top:0px;"></div>');
document.write('</div>');
document.write('</div>');

</script>

Trace

7:50 pm on Jun 5, 2007 (gmt 0)

10+ Year Member



Here's the final version of the ticker if anyone wants it. It now works with all speeds and all sizes of texts.


<script type="text/javascript">

// message to scroll
var marqueecontent='<font face="Arial">Lorem </font>';
// test text
//var marqueecontent='<font face="Arial">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris congue dui eu leo. Morbi imperdiet, elit ut volutpat consequat, turpis erat mollis sapien, at egestas nibh arcu nec risus. Suspendisse diam. Nunc dictum. Maecenas mattis felis eget nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</font>';
var copyspeed=10; // <-- speed of ticker
var tickerWidth = 300; // <-- ticker width
var tickerHeight = 25; // <-- ticker height

// global variables
var actualWidth='';
var jsMarquee1;
var jsMarquee2;
var div1Interval = 0;
var div2Interval = 0;
var timeToStartSecond= new Array(8)
var div1Status = 0;
var div2Status = 0;

document.write('<span id="temp" style="visibility:hidden;position:absolute;left:-5000px;">'+marqueecontent+'</span>'); // used to determine initial content width
document.write('<span id="temp2" style="visibility:hidden;position:absolute;left:-5000px;"></span>'); // used later to calculate the new width of the content

function populate(){
actualWidth=document.getElementById("temp").offsetWidth;
actualWidthTemp=document.getElementById("temp").offsetWidth;

// first DIV
jsMarquee1=document.getElementById('marquee1');
jsMarquee1.style.left=parseInt(tickerWidth)+"px";

// second DIV
jsMarquee2=document.getElementById('marquee2');
jsMarquee2.style.left=parseInt(tickerWidth)+"px";

if(actualWidth <= (tickerWidth*2)){

var tempContent;
tempContent = "<nobr>";

// make sure that the div is larger than the ticker area
// if not, duplicate the content
while (actualWidth < (tickerWidth*2)){
tempContent = tempContent + marqueecontent;
actualWidth = actualWidth + actualWidthTemp;
}
tempContent = tempContent + "</nobr>"

// load the content into the divs
jsMarquee1.innerHTML=tempContent;
jsMarquee2.innerHTML=tempContent;

// get the new actual width of the content
document.getElementById("temp2").innerHTML=tempContent;
actualWidth = document.getElementById("temp2").offsetWidth;

}else{
// load the content into the divs
jsMarquee1.innerHTML="<nobr>"+marqueecontent+"</nobr>";
jsMarquee2.innerHTML="<nobr>"+marqueecontent+"</nobr>";
}

timeToStartSecond=(tickerWidth-actualWidth);
}
window.onload=populate

function scrollMarquee(){
if ((parseInt(jsMarquee1.style.left)>(actualWidth*(-1)))){
jsMarquee1.style.left=parseInt(jsMarquee1.style.left)-copyspeed+"px";

// call function to begin the second DIV
if(parseInt(jsMarquee1.style.left) < timeToStartSecond && div1Status == 0){
div1Status = 1;
div2Status = 0;
beginSecondMarquee();
}
}else{
//resets the div to it's original location
document.getElementById("marquee1").style.left = parseInt(tickerWidth)+"px";
//clear the interval and stop animation
div1Interval = window.clearInterval(div1Interval);
}
}

function scrollSecondMarquee(){
if (parseInt(jsMarquee2.style.left)>(actualWidth*(-1))){
jsMarquee2.style.left=parseInt(jsMarquee2.style.left)-copyspeed+"px";

// call function to restart the first DIV
if(parseInt(jsMarquee2.style.left) < timeToStartSecond && div2Status == 0){
div1Status = 0;
div2Status = 1;
startMarquee();
}
}else{
//resets the div to it's original location
document.getElementById("marquee2").style.left = parseInt(tickerWidth)+"px";
//clear the interval and stop animation
div2Interval = window.clearInterval(div2Interval);
}
}

/* begins the second marquee */
function beginSecondMarquee(){
div2Interval = window.setInterval("scrollSecondMarquee()",20);
}

/* begins the first marquee */
function startMarquee(){
div1Interval = window.setInterval("scrollMarquee()",20);
}
startMarquee();

document.write('<div style="position:relative;width:'+tickerWidth+'px;height:'+tickerHeight+'px;overflow:hidden">');
document.write('<div style="position:absolute;width:'+tickerWidth+'px;height:'+tickerHeight+'px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed='+copyspeed+'">');
document.write('<div id="marquee1" style="position:absolute;left:0px;top:0px;"></div>');
document.write('<div id="marquee2" style="position:absolute;left:0px;top:0px;"></div>');
document.write('</div>');
document.write('</div>');

</script>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:37 pm May 14, 2026