2 Marquees on 1 page

**drumminlogan** · 02-01-2007, 05:35 PM

I am wanting to put 2 marquees from http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm on 1 page. When I do, it doesn't work correctly. What do I need to do so I can have both on 1 page. Thanks.

**BLiZZaRD** · 02-01-2007, 06:13 PM

If the content is the exact same in both... then all the code that goes in the <body> section... copy ALL of it to the second spot you want it to appear.

If the content is different...

See all that code below the ///DO NOT EDIT BELOW THIS LINE ...??

You have to edit all that.

Alternately, you could make 2 separate marquees put on on your page as normal. put the other on a page all by it's lonesome, with NO OTHER code, and use php include(); to attach it where you want it on the page.

Not sure how that will look, of course... but it may be just right.

**drumminlogan** · 02-01-2007, 06:23 PM

thats what I tried and it didn't work. The top marquee worked sort of (it was scrolling the text that should have been in the bottom marquee), but the bottom one didn't. I copied it exactly.

**jscheuer1** · 02-01-2007, 07:12 PM

Try this out:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/*
* OO Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
* For full TOS source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
* Credit MUST stay intact
* Modified in http://www.dynamicdrive.com/forums by jscheuer1 * For multiple use
*/
var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'
var marqueecontent2='<nobr>And the text just keeps on whizzing by, no matter what you do!</nobr>'

//////////////// Stop Editing ////////////////

function cross_marquee(marqueecontent, marqueewidth, marqueeheight, marqueespeed, marqueebgcolor, pauseit){
if(!cross_marquee.ar)
cross_marquee.ar=[];
cross_marquee.ar[this.mqid=cross_marquee.ar.length]=this;
this.marqueecontent=marqueecontent;
this.marqueewidth=marqueewidth;
this.marqueeheight=marqueeheight;
this.marqueespeed=marqueespeed;
this.marqueebgcolor=marqueebgcolor;
this.pauseit=pauseit;

this.marqueespeed=(document.all)? this.marqueespeed : Math.max(1, this.marqueespeed-1) //slow speed down by 1 for NS
this.copyspeed=this.marqueespeed
this.pausespeed=(this.pauseit==0)? this.copyspeed: 0
this.iedom=document.all||document.getElementById
if (this.iedom)
document.write('<span id="temp'+this.mqid+'" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+this.marqueecontent+'</span>')
this.actualwidth=''
if (this.iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (this.iedom){
write('<div style="position:relative;width:'+this.marqueewidth+';height:'+this.marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+this.marqueewidth+';height:'+this.marqueeheight+';background-color:'+this.marqueebgcolor+'" onMouseover="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].pausespeed" onMouseout="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].marqueespeed">')
write('<div id="iemarquee'+this.mqid+'" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+this.marqueewidth+' height='+this.marqueeheight+' name="ns_marquee'+this.mqid+'" bgColor='+this.marqueebgcolor+'>')
write('<layer name="ns_marquee2'+this.mqid+'" left=0 top=0 onMouseover="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].pausespeed" onMouseout="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

this.populate();
}

cross_marquee.prototype.populate=function(){
if (this.iedom){
this.cross_marquee=document.getElementById? document.getElementById("iemarquee"+this.mqid) : document.all['iemarquee'+this.mqid];
this.cross_marquee.style.left=parseInt(this.marqueewidth)+8+"px"
this.cross_marquee.innerHTML=this.marqueecontent
this.actualwidth=document.all? document.all['temp'+this.mqid].offsetWidth : document.getElementById("temp"+this.mqid).offsetWidth;
}
else if (document.layers){
this.ns_marquee=document['ns_marquee'+this.mqid].document['ns_marquee2'+this.mqid];
this.ns_marquee.left=parseInt(marqueewidth)+8
this.ns_marquee.document.write(this.marqueecontent)
this.ns_marquee.document.close()
this.actualwidth=this.ns_marquee.document.width
}
var cacheobj=this;
this.lefttime=setInterval(function(){cacheobj.scrollmarquee();},20)
}

cross_marquee.prototype.scrollmarquee=function(){
if (this.iedom){
if (parseInt(this.cross_marquee.style.left)>(this.actualwidth*(-1)+8))
this.cross_marquee.style.left=parseInt(this.cross_marquee.style.left)-this.copyspeed+"px"
else
this.cross_marquee.style.left=parseInt(this.marqueewidth)+8+"px"

}
else if (document.layers){
if (this.ns_marquee.left>(this.actualwidth*(-1)+8))
this.ns_marquee.left-=this.copyspeed
else
this.ns_marquee.left=parseInt(this.marqueewidth)+8
}
}

</script>
</head>
<body>

<script type="text/javascript">
/*Explanation of Parameters:
marqueecontent //Specify the name of the array containing the marquee text
marqueewidth //Specify the marquee's width (in pixels) ex: "300px"
marqueeheight //Specify the marquee's height ex: "25px"
marqueespeed //Specify the marquee's marquee speed (larger is faster 1-10) ex: 2
marqueebgcolor //Specify background color ex: "#DEFDD9"
pauseit //Pause marquee onMousever (0=no. 1=yes)?

usage: new cross_marquee(marqueecontent, marqueewidth, marqueeheight, marqueespeed, marqueebgcolor, pauseit)
*/
new cross_marquee(marqueecontent, "300px", "25px", 2, "#DEFDD9", 1)
</script>

<br>

<script type="text/javascript">
new cross_marquee(marqueecontent2, "200px", "25px", 3, "#cccccc", 0)
</script>
</body>
</html>

Notes: The script now goes in the head and there are separate calls for each marquee in the body, as shown.

**drumminlogan** · 02-01-2007, 07:18 PM

awesome. thanks

**jillo** · 02-24-2007, 02:06 AM

I'm trying to get my page to validate, meaning I have to get all the javascript into separate .js file and pass it the four or five variables needed to customize the marquee. I thought I could adapt the above code, but in IE6, it stops running halfway across screen.

**jscheuer1** · 02-24-2007, 05:46 AM

Originally Posted by jillo

I'm trying to get my page to validate, meaning I have to get all the javascript into separate .js file and pass it the four or five variables needed to customize the marquee. I thought I could adapt the above code, but in IE6, it stops running halfway across screen.

That has nothing to do with it being external. IE has problems centering content that is positioned absolutely. If you use align="center", <center>, or text-align:center for any element containing the marquee, it will cause the absolute content of the marquee to appear to spring from or in some other way be limited by the center of the container.

The way to center the marquee is use at least a loose transitional DOCTYPE and this for a container:

HTML Code:

<div style="width:200px;margin:0 auto;">
marquee script call here
</div>

The 200px should be the actual display width of the marquee. This method will not be successful if you still have any container element around it on the page that uses the centering methods I've mentioned as being problematical. If you need more help, please post a link to your page.

**timsnell** · 05-22-2007, 01:34 PM

This code is really helpful and I'm trying to incorporate it onto my site. It works fine in firefox but in IE the marquee's display one line from right to left and then reset themselves.

Would someone (John?!) be able to have a look at the page to see if you could find out why?

For some reason when I comment out the following code

HTML Code:

<table width="828" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr><td colspan="5">
  
 <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="padding: 5px 0 5px 0;">

which appears directly after the <body> tag the marquee's work (albeit with the page looking messy)

The link is: http://www.midwivesonline.com/indextest2.php

I'd apreciate it if anyone could help me out,

thanks,

Tim

Thread: 2 Marquees on 1 page

Thread Tools

Search Thread

2 Marquees on 1 page

Bookmarks

Bookmarks

Posting Permissions