Cross Browser marquee II

**fafche** · 02-03-2009, 01:18 PM

Is there a way to place more then one marquee like that on the page??

**vwphillips** · 02-03-2009, 03:03 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

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

.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #FF0000}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var srt=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var spd=2 //Specify marquee scroll speed (larger is faster 1-10)

////NO NEED TO EDIT BELOW THIS LINE////////////

var MAry=['tst','vmarquee'];

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
 for (var z0=0;z0<MAry.length;z0++){
  var cm=document.getElementById(MAry[z0]);
  if (cm) cm.parentNode.marquee=new marquee(cm);
 }
}

function marquee(cm){
 this.obj=cm;
 this.to=null;
 cm.style.top='0px';
 this.min=cm.parentNode.offsetHeight;
 this.max=-cm.offsetHeight;
 this.pos=0;
 if (srt) setTimeout(function(oop){return function(){oop.start();}}(this),srt);
}

marquee.prototype.start=function(){
 this.stop();
 this.pos--;
 if (this.pos<this.max) this.pos=this.min;
 this.obj.style.top=this.pos+'px';
 this.to=setTimeout(function(oop){return function(){oop.start();}}(this),spd);
}

marquee.prototype.stop=function(){
 clearTimeout(this.to);
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>

</head>

<body>
<p>&nbsp;</p>
<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="tst" style="position: absolute; width: 98%; overflow: auto;">
Line 1<br>
<br>
Line 2<br>
<br>
Line 3<br>
<br>
Line 4<br>
<br>
Line 5<br>
<br>
Line 6<br>
<br>
</div>
</div>

<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="vmarquee" style="position: absolute; width: 98%; overflow: auto;">
<!--YOUR SCROLL CONTENT HERE-->
<div align="center"><strong><font face="Arial, Helvetica, sans-serif" color="#0000FF">Pafos
Car Hire</font></strong> </div>
<h5 align="center" class="style1">We are a reliable Online Car Rental Company
in Cyprus.</h5>
<h5 align="center" class="style1"> Book your car hire for your holiday to
Cyprus, delivery can be made Island wide. Our packages assure, highly competitive
car hire rates. Our prices include delivery & collection, CDW comprehensive
insurance, car theft insurance, 2nd driver's insurance, all local taxes,
multilingual service team, 24 hour emergency service and on road technical
assistance.<br>
<br>
<span class="style2">Cyprus car hire wth no hidden costs </span><br>
<br>
The price you quoted is the price you pay. Check our <a href="index.php">www.paphoscarhire.com</a> low
cost <a href="rates.php">prices</a>.<br>
<br>
<b><font face="Arial" size="2"><span class="style2">Special Services:</span> 24hours
service - All over Cyprus delivery/collection - Always Pay-on-Arrival...it
couldn't be safer , no credit card details have to be given until Rental
Start !</font></b><br>
</h5>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<p>&nbsp;</p>
</body>
</html>

or

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

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

.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #FF0000}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var MAry=[];
//        id,  speed, start delay
MAry[0]=['tst',10,    1000];
MAry[1]=['vmarquee',80];

////NO NEED TO EDIT BELOW THIS LINE////////////


function initializemarquee(){
 for (var z0=0;z0<MAry.length;z0++){
  var cm=document.getElementById(MAry[z0][0]);
  if (cm) cm.parentNode.marquee=new marquee(cm,MAry[z0]);
 }
}

function marquee(cm,ary){
 this.obj=cm;
 this.to=null;
 this.spd=ary[1]||50;
 cm.style.top='0px';
 this.min=cm.parentNode.offsetHeight;
 this.max=-cm.offsetHeight;
 this.pos=0;
 if (ary[2]) setTimeout(function(oop){return function(){oop.start();}}(this),ary[2]);
}

marquee.prototype.start=function(){
 this.stop();
 this.pos--;
 if (this.pos<this.max) this.pos=this.min;
 this.obj.style.top=this.pos+'px';
 this.to=setTimeout(function(oop){return function(){oop.start();}}(this),this.spd);
}

marquee.prototype.stop=function(){
 clearTimeout(this.to);
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>

</head>

<body>
<p>&nbsp;</p>
<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="tst" style="position: absolute; width: 98%; overflow: auto;">
Line 1<br>
<br>
Line 2<br>
<br>
Line 3<br>
<br>
Line 4<br>
<br>
Line 5<br>
<br>
Line 6<br>
<br>
</div>
</div>

<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="vmarquee" style="position: absolute; width: 98%; overflow: auto;">
<!--YOUR SCROLL CONTENT HERE-->
<div align="center"><strong><font face="Arial, Helvetica, sans-serif" color="#0000FF">Pafos
Car Hire</font></strong> </div>
<h5 align="center" class="style1">We are a reliable Online Car Rental Company
in Cyprus.</h5>
<h5 align="center" class="style1"> Book your car hire for your holiday to
Cyprus, delivery can be made Island wide. Our packages assure, highly competitive
car hire rates. Our prices include delivery & collection, CDW comprehensive
insurance, car theft insurance, 2nd driver's insurance, all local taxes,
multilingual service team, 24 hour emergency service and on road technical
assistance.<br>
<br>
<span class="style2">Cyprus car hire wth no hidden costs </span><br>
<br>
The price you quoted is the price you pay. Check our <a href="index.php">www.paphoscarhire.com</a> low
cost <a href="rates.php">prices</a>.<br>
<br>
<b><font face="Arial" size="2"><span class="style2">Special Services:</span> 24hours
service - All over Cyprus delivery/collection - Always Pay-on-Arrival...it
couldn't be safer , no credit card details have to be given until Rental
Start !</font></b><br>
</h5>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<p>&nbsp;</p>
</body>
</html>

**vwphillips** · 02-03-2009, 03:53 PM

or if you do not want the blank space

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

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

.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #FF0000}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var MAry=[];
//        id,  speed, start delay
MAry[0]=['tst',10,    1000];
MAry[1]=['vmarquee',80];

////NO NEED TO EDIT BELOW THIS LINE////////////


function initializemarquee(){
 for (var z0=0;z0<MAry.length;z0++){
  var cm=document.getElementById(MAry[z0][0]);
  if (cm) cm.parentNode.marquee=new marquee(cm,MAry[z0]);
 }
}

function marquee(cm,ary){
 this.to=null;
 this.spd=ary[1]||50;
 cm.style.top='0px';
 this.max=-cm.offsetHeight;
 this.objs=[[cm,0],[cm.cloneNode(true),-this.max]];
 cm.parentNode.appendChild(this.objs[1][0]);
 for (var z0=0;z0<this.objs.length;z0++){
  this.objs[z0][0].style.top=this.objs[z0][1]+'px';
 }
 if (ary[2]) setTimeout(function(oop){return function(){oop.start();}}(this),ary[2]);
}

marquee.prototype.start=function(){
 this.stop();
 for (var z0=0;z0<this.objs.length;z0++){
  this.objs[z0][1]--;
  this.objs[z0][0].style.top=this.objs[z0][1]+'px';
  if (this.objs[z0][1]==this.max) this.objs[z0][1]=-this.max;
 }
 this.to=setTimeout(function(oop){return function(){oop.start();}}(this),this.spd);
}

marquee.prototype.stop=function(){
 clearTimeout(this.to);
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>

</head>

<body>
<p>&nbsp;</p>
<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="tst" style="position: absolute; width: 98%; overflow: auto;">
Line 1<br>
<br>
Line 2<br>
<br>
Line 3<br>
<br>
Line 4<br>
<br>
Line 5<br>
<br>
Line 6<br>
<br>
</div>
</div>

<div class="marqueecontainer" onmouseover="this.marquee.stop();"   onmouseout="this.marquee.start();">
<div id="vmarquee" style="position: absolute; width: 98%; overflow: auto;">
<!--YOUR SCROLL CONTENT HERE-->
<div align="center"><strong><font face="Arial, Helvetica, sans-serif" color="#0000FF">Pafos
Car Hire</font></strong> </div>
<h5 align="center" class="style1">We are a reliable Online Car Rental Company
in Cyprus.</h5>
<h5 align="center" class="style1"> Book your car hire for your holiday to
Cyprus, delivery can be made Island wide. Our packages assure, highly competitive
car hire rates. Our prices include delivery & collection, CDW comprehensive
insurance, car theft insurance, 2nd driver's insurance, all local taxes,
multilingual service team, 24 hour emergency service and on road technical
assistance.<br>
<br>
<span class="style2">Cyprus car hire wth no hidden costs </span><br>
<br>
The price you quoted is the price you pay. Check our <a href="index.php">www.paphoscarhire.com</a> low
cost <a href="rates.php">prices</a>.<br>
<br>
<b><font face="Arial" size="2"><span class="style2">Special Services:</span> 24hours
service - All over Cyprus delivery/collection - Always Pay-on-Arrival...it
couldn't be safer , no credit card details have to be given until Rental
Start !</font></b><br>
</h5>
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<p>&nbsp;</p>
</body>
</html>

**jscheuer1** · 02-03-2009, 05:57 PM

Very nice code. One thing I would comment on though is:

Code:

cm.parentNode.marquee=new marquee(cm,MAry[z0])

Although this works, it's assigning a non-standard property to the element cm.parentNode. It's generally best to avoid this, as some browsers may not allow it, and some browsers at some future time may have another use for it. If you can assign the instances (new marquee(cm,MAry[z0])) to a javascript object, these potential issues will not exist.

I often use a property of an object property of the function:

Code:

marquee.instances[cm.id] = new marquee(cm,MAry[z0]);

To do this, one needs to create the object before it's used:

Code:

marquee.instances = {};

It makes it a little harder to reference the instance, at least in the way you are doing it, but not impossible (it's keyed to the unique id of the instance). And depending upon how you assign the start and stop events, it can be just as easy as what you are doing.

**Artist: Unknown** · 09-07-2011, 11:44 PM

In Firefox, when I tried to apply the without-white-space version, the content broke out of the div space and went full-page. I don't understand how to force the content back inside the part of the page where it belongs.

Here's a tiny version of the table I'm trying to scroll. You can see the page header ends up behind the scrolling table content.

Code:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.marqueecontainer{
width: 400px; /*marquee width */
height: 150px; /*marquee height */
position: relative;
overflow: hidden;
padding: 2px;
padding-left: 2px;
}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Â© Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var MAry=[];
//        id,  speed, start delay
MAry[0]=['vmarquee',100,    1];

////NO NEED TO EDIT BELOW THIS LINE////////////

function initializemarquee(){
 for (var z0=0;z0<MAry.length;z0++){
  var cm=document.getElementById(MAry[z0][0]);
  if (cm) cm.parentNode.marquee=new marquee(cm,MAry[z0]);
 }
}

function marquee(cm,ary){
 this.to=null;
 this.spd=ary[1]||50;
 cm.style.top='0px';
 this.max=-cm.offsetHeight;
 this.objs=[[cm,0],[cm.cloneNode(true),-this.max]];
 cm.parentNode.appendChild(this.objs[1][0]);
 for (var z0=0;z0<this.objs.length;z0++){
  this.objs[z0][0].style.top=this.objs[z0][1]+'px';
 }
 if (ary[2]) setTimeout(function(oop){return function(){oop.start();}}(this),ary[2]);
}

marquee.prototype.start=function(){
 this.stop();
 for (var z0=0;z0<this.objs.length;z0++){
  this.objs[z0][1]--;
  this.objs[z0][0].style.top=this.objs[z0][1]+'px';
  if (this.objs[z0][1]==this.max) this.objs[z0][1]=-this.max;
 }
 this.to=setTimeout(function(oop){return function(){oop.start();}}(this),this.spd);
}

marquee.prototype.stop=function(){
 clearTimeout(this.to);
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<style type="text/css"> table {font-size: 200%;} body {font-family: "Arial", Arial, Helvetica, sans-serif;} </style>
<meta http-equiv="refresh" content="360">
</HEAD>

<BODY bgcolor="blue" text="white">
<CENTER style="font-size: 200%;">Prices</CENTER>

<div id="marqueecontainer">
<div id="vmarquee" style="position: absolute; width: 98%; overflow: auto;">
<TABLE width="95%" border="2" align="center">
	<THEAD bgcolor="gray">
		<TR>
			<TH colspan="3">Today 9/7/2011</TH>
		</TR>
	</THEAD>
	<TBODY>
		<TR>

			<TD width="">Bananas</TD>
			<TD style="text-align:center;" width="">$0.50</TD>
			<TD width="40%">pound</TD>
		</TR>
	</TBODY>
</TABLE>
</div>
</div>
</BODY>

</HTML>

**vwphillips** · 09-08-2011, 08:29 AM

Code:

#marqueecontainer{
width: 400px; /*marquee width */
height: 150px; /*marquee height */
position: relative;
overflow: hidden;
top:100px;
padding: 2px;
padding-left: 2px;
border:solid red 1px;
}

**Artist: Unknown** · 09-08-2011, 08:28 PM

One optional addition: If you know the maximum size, adding the following as the first line of function marquee will make scrolling happen only if the contents are too large for the container:

Code:

 if( cm.offsetHeight < 150 ) return;

In this example I hardcoded the same value as is in the CSS above. There's probably a cross-browser way to find the defined height of the container.

I say this is optional, but if you don't do this I expect you'd see scrolling repetitions of the content.

Thread: Cross Browser marquee II

Thread Tools

Search Thread

Cross Browser marquee II

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions