PDA

View Full Version : 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/showthread.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
<!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)