PDA

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

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

vwphillips
07-07-2014, 11:34 AM
that is a very old script

try


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

iluvcss
07-09-2014, 09:58 AM
Thank you both for your kind help. Much appreciated. :)