Cross Browser Marquee

**iluvcss** · 07-06-2014, 11:36 AM

1) Script Title: Cross Browser Marquee

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

3) Describe problem: I am using the marquee on a responsive page ("max-width:xxpx" in css).
I want the marquee's width to follow the fluid width of the div.
How do I make it do that?
Thank you in advance for your help.

**Deadweight** · 07-06-2014, 08:17 PM

I think that is what you are looking for...

Code:

"max-width: "+document.getElementById("mydiv").offsetWidth+"px"

**vwphillips** · 07-07-2014, 11:34 AM

that is a very old script

try

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">
/*<![CDATA[*/

.marquee {
 position:relative;overflow:hidden;width:40%;height:30px;background-Color:#FFFF66;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<div id="marquee1" class="marquee"
 onmouseover="zxcMarquee.Speed('marquee1',0);"
 onmouseout="zxcMarquee.Speed('marquee1',-2);"
>
<div><span><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></span> </div>
</div>
<br />
<div id="marquee2" class="marquee" style="width:40%;"
 onmouseover="zxcMarquee.Speed('marquee2',2);"
 onmouseout="zxcMarquee.Speed('marquee2',0);"
>
<div><span><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></span> </div>
</div>



<script type="text/javascript">
/*<![CDATA[*/
var zxcMarquee={

 Speed:function(id,s){
  var o=this['zxc'+id];
  if (o){
   o.s=typeof(s)=='number'?s:0;
   this.scroll(o);
  }
  else {
   this.init({ID:id,Speed:s});
  }
 },

 init:function(o){
  var p=document.getElementById(o.ID),s=o.Speed,b=p?p.getElementsByTagName('DIV')[0]:null,c=b?b.lastChild:null,c=c&&c.nodeType!=1?c.previousSibling:c;
  if (c&&c.nodeType==1&&!this['zxc'+o.ID]){
   p.style.overflow='hidden';
   b.style.position='absolute';
   o.mx=c.offsetLeft+c.offsetWidth;
   o.p=p;
   o.b=b;
   o.n=b.offsetLeft;
   zxcMarquee['zxc'+o.ID]=o;
   o.s!=0?this.Speed(o.ID,s):null;
  }
 },

 scroll:function(o){
  var pw=o.p.offsetWidth,n=o.n+o.s,n=o.s>0&&n>pw?n-o.mx-pw:o.s<0&&n<-o.mx?pw:n;
  clearTimeout(o.to);
  if (o.s!=0){
   o.b.style.left=n+'px';
   o.n=n
   o.to=setTimeout(function(){ zxcMarquee.scroll(o); },30);
  }
 }

}

zxcMarquee.init({
 ID:'marquee1',
 Speed:-2
});
/*]]>*/
</script></body>

</html>