Two Instances of Cross Browser Marquee II

**Mark Han** · 07-08-2010, 01:54 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 wondering if it is possible to use 2 instances of this script on one page? Are there any variables that will be needed to be added/adjusted?

Thanks,
Mark.

P.S. I do love this scroller..it is so easy to adjust the content and it is exceedingly smooth when running.

**vwphillips** · 07-08-2010, 02:52 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 id="vmarquee" 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>

</div>
</div>
<div id="marqueecontainer2" onMouseover="M2.Speed=0;" onMouseout="M2.Speed=2;">
 <div id="vmarquee" 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>

</div>
</div>
<script  type="text/javascript">
/*<![CDATA[*/
function Marquee(o){
 var oop=this,obj=document.getElementById(o.ID);
 this.marquee=obj.getElementsByTagName('DIV')[0];
 this.marquee.style.top='0px';
 this.marqueeheight=obj.offsetHeight;
 this.actualheight=this.marquee.offsetHeight;
 this.Speed=o.marqueespeed;
 setTimeout(function(){ setInterval(function(){ oop.scroll(); },30); }, o.delayb4scroll)
}

Marquee.prototype.scroll=function(){
 if (parseInt(this.marquee.style.top)>(this.actualheight*(-1)+8)){
  this.marquee.style.top=parseInt(this.marquee.style.top)-this.Speed+"px";
 }
 else {
  this.marquee.style.top=parseInt(this.marqueeheight)+8+"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:200, //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>

**Mark Han** · 07-09-2010, 10:38 AM

Thanks Vic,

Am I right in thinking that the javascript code goes in the <body> and not the <head> like it was in the original CBMII ? And what does /*<![CDATA[*/ stand for?

The code I mean is:

Code:

<script  type="text/javascript">
/*<![CDATA[*/
function Marquee(o){
 var oop=this,obj=document.getElementById(o.ID);
 this.marquee=obj.getElementsByTagName('DIV')[0];
 this.marquee.style.top='0px';
 this.marqueeheight=obj.offsetHeight;
 this.actualheight=this.marquee.offsetHeight;
 this.Speed=o.marqueespeed;
 setTimeout(function(){ setInterval(function(){ oop.scroll(); },30); }, o.delayb4scroll)
}

Marquee.prototype.scroll=function(){
 if (parseInt(this.marquee.style.top)>(this.actualheight*(-1)+8)){
  this.marquee.style.top=parseInt(this.marquee.style.top)-this.Speed+"px";
 }
 else {
  this.marquee.style.top=parseInt(this.marqueeheight)+8+"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:200, //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>

Thanks,
Mark.

**vwphillips** · 07-09-2010, 12:49 PM

the /*<![CDATA[*/ are appropriate for the doc type I use

Code:

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:200, //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
 marqueespeed:2 //Specify marquee scroll speed (larger is faster 1-10)
});

must be called after the page has loaded and therefore positioned immediatly before the</BODY> tag in my example

the rest of the code can go in the HEADer tags

**Mark Han** · 07-09-2010, 01:49 PM

Thanks Vic.

I shall try this out!

Mark.

P.S. You use the same Doctype that I generally use.

**Mark Han** · 07-09-2010, 02:16 PM

Just set it up..works fine in FF. Thanks.

Mark.

**Mark Han** · 07-09-2010, 08:00 PM

Hi Vic,

I have had to alter the code somewhat are checking the W3C validation.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div id="marqueecontainer" onmouseover="m1.Speed=0;" onmouseout="m1.Speed=1;">
 <div id="vmarquee" style="position: absolute; width: 98%;">

/*content here*/


</div>
</div>

And:

HTML Code:

<div id="marqueecontainer2" onmouseover="m2.Speed=0;" onmouseout="m2.Speed=1;">
      <div id="vmarquee2" style="position: absolute; width: 98%;">

//content here

</div>
</div>

I also had to adjust the other code:

Code:

<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:1 //Specify marquee scroll speed (larger is faster 1-10)
});


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

/*]]>*/
</script>

Mark.

P.S. How do I properly add comments in Markup?

Thread: Two Instances of Cross Browser Marquee II

Thread Tools

Search Thread

Two Instances of Cross Browser Marquee II

Alterations

Bookmarks

Bookmarks

Posting Permissions