PDA

View Full Version : Cross Browser marquee II - Content start again before first cycle



Micheal
10-19-2010, 12:28 PM
1) Script Title:

Cross Browser marquee II

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

3) Describe problem:

I am currently using the above script on a site I am working on. It work's perfectly fine with content I have entered into it.

I want to know if you can make the content start scrolling again before the first lot of content has completed its cycle. Currently the content scrolls and there is a large empty section on a side bar while the script waits for the end of the content to finish.

vwphillips
10-19-2010, 03:11 PM
<!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></title>
<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow:hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

#marqueecontainer2{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow:hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

</head>

<body>
<div id="marqueecontainer" onMouseover="M1.Speed=0" onMouseout="M1.Speed=2">
<div style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents 1</h4>
<h4>Your scroller contents 2</h4>
<h4>Your scroller contents 3</h4>
<h4>Your scroller contents 4</h4>
<h4>Your scroller contents 5</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>
<div id="marqueecontainer2" onMouseover="M2.Speed=0" onMouseout="M2.Speed=2">
<div style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents 1</h4>
<h4>Your scroller contents 2</h4>
<h4>Your scroller contents 3</h4>
<h4>Your scroller contents 4</h4>
<h4>Your scroller contents 5</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

function Marquee(o){
var p=document.getElementById(o.ID),oop=this;
this.divs=[p.getElementsByTagName('DIV')[0]];
this.h=this.divs[0].offsetHeight
this.divs[0].style.top=-this.h+'px';
for (var top=0,div,z0=0;z0<Math.ceil(p.offsetHeight/this.divs[0].offsetHeight);z0++){
this.divs[z0+1]=this.divs[0].cloneNode(true);
p.appendChild(this.divs[z0+1]);
this.divs[z0+1].style.top=this.h*z0+'px';
}
this.Speed=o.Speed||1;
o.DelayStart=o.DelayStart||10;
setTimeout(function(){ oop.scroll(); },o.DelayStart);
}

Marquee.prototype={

scroll:function(){
if (this.Speed>0){
for (var z0=0;z0<this.divs.length;z0++){
if ((parseInt(this.divs[z0].style.top)<-this.h)){
this.divs[z0].style.top=parseInt(this.divs[z0].style.top)+this.h*this.divs.length+'px';
}
this.divs[z0].style.top=parseInt(this.divs[z0].style.top)-this.Speed+'px';
}
}
var oop=this;
setTimeout(function(){ oop.scroll(); },50);
}

}


var M1=new Marquee({
ID:'marqueecontainer',
Speed:2,
DelayStart:2000
});

var M2=new Marquee({
ID:'marqueecontainer2'
});

/*]]>*/
</script></body>

</html>