Creating multiple scrolls/feeds Cross Browser marquee II

**mannkumar** · 07-14-2010, 03:05 PM

1) Script Title: Cross Browser marquee II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

3) Describe problem:
Having managed to get the Cross Browser marquee II within a single window/div i was hoping to create a page with multiple scrolls/feeds, but it appears just copy/pasting the scripts does n't seem to work. refer to the link for my attempted page ;

http://lotus-architects.com/test/contact.html

does anyone know if multiple scrolls/feeds are possible - do i need to rename some variables, as the first feed (feed1) works but when i copy it to create (feed2) it does n't seem to work ?

**vwphillips** · 07-14-2010, 04:11 PM

http://www.dynamicdrive.com/forums/s...ad.php?t=55817

**mannkumar** · 07-15-2010, 10:41 AM

many thanks, problem sorted, although does anyone know to remove the gap at the end of the scroll (so the viewer do see the blank space before the scroll starts again....so that the scroll repeats without the break?)

**vwphillips** · 07-15-2010, 01:17 PM

Code:

<!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%;">

<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>

<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
<br />
</div>
</div>
<div id="marqueecontainer2" onMouseover="M2.Speed=0;" onMouseout="M2.Speed=2;">
 <div style="position: absolute; width: 98%;">

<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>

<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
<br />
</div>
</div>
<script  type="text/javascript">
/*<![CDATA[*/
function Marquee(o){
 var oop=this,obj=document.getElementById(o.ID),top=0;
 var marquee=obj.getElementsByTagName('DIV')[0];
 this.marqueeheight=marquee.offsetHeight;
 marquee.style.top=-this.marqueeheight+'px';

 this.marquee=[marquee];
 while (top<obj.offsetHeight){
  marquee=marquee.cloneNode(true);
  marquee.style.top=top+'px';
  obj.appendChild(marquee);
  this.marquee.push(marquee);
  top+=this.marqueeheight;
 }

 this.Speed=o.marqueespeed;
 setTimeout(function(){ setInterval(function(){ oop.scroll(); },30); }, o.delayb4scroll)
}

Marquee.prototype.scroll=function(){
 for (var top,z0=0;z0<this.marquee.length;z0++){
  top=parseInt(this.marquee[z0].style.top)-this.Speed
  this.marquee[z0].style.top=top+"px";
  if (top<-this.marqueeheight){
   this.marquee[z0].style.top=top+this.marqueeheight*this.marquee.length+"px";
  }
 }
}

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

var M1=new Marquee({
 ID:'marqueecontainer',
 delayb4scroll:2000, //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
 marqueespeed:2 //Specify marquee scroll speed (larger is faster 1-10)
});


var M2=new Marquee({
 ID:'marqueecontainer2',
 delayb4scroll:2000, //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
 marqueespeed:2 //Specify marquee scroll speed (larger is faster 1-10)
});


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

</html>

**mannkumar** · 07-15-2010, 02:16 PM

fantastic work thanks!....one final query, is there anyway that a time delay can be added before the loop re-runs (like the delay that can be used to start the scroll)

Thread: Creating multiple scrolls/feeds Cross Browser marquee II

Thread Tools

Search Thread

Creating multiple scrolls/feeds Cross Browser marquee II

Bookmarks

Bookmarks

Posting Permissions