PDA

View Full Version : 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
<!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


<!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


<!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:


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:


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

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


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.



<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
#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:


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.