horizontal marquee rtl [Archive] - Dynamic Drive Forums

d-machine

07-03-2010, 07:21 AM

Cross Browser marquee

http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm (Cross Browser marquee)

How can I seperate the script and the html content?
I want to add the JS to a specific html div,
How can I make it?

Thanks!

djr33

07-03-2010, 07:44 AM

I don't know the answer to this question (at least not yet), but I do know that you need to give more information. What do you mean "separate"? If you completely separate them, then it won't work any more. Can you give an example?
And a link to the page would probably help.

d-machine

07-03-2010, 07:55 AM

I mean to have div that will work with this function

like the html will include:

<div id="animation">content</div>

and the script will include document.getElementById('animation')

Thanks

vwphillips

07-03-2010, 01:08 PM

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

<body>
<div style="position:relative;overflow:hidden;width:300px;height:30px;background-color:#99CCFF" onmouseover="M1.Speed=0;" onmouseout="M1.Speed=2;" >
<div id="marquee1" style="position:absolute;left:0px;top:0px;white-Space:nowrap;"><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></div>
</div>

<div style="position:relative;overflow:hidden;width:300px;height:30px;background-color:#99CCFF" onmouseover="M2.Speed=0;" onmouseout="M2.Speed=1;" >
<div id="marquee2" style="position:absolute;left:0px;top:0px;white-Space:nowrap;"><font face="Arial">Thank you for visiting <a href="http://www.vicsjavascripts.org.uk/">Vics Javascripts.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

function Marquee(o){
this.obj=document.getElementById(o.ID);
this.mm=[-this.obj.offsetWidth,this.obj.parentNode.offsetWidth];
this.obj.style.left=this.mm[1]+'px';
this.Speed=o.Speed||1;
this.Rotate();

}

Marquee.prototype.Rotate=function(){
var oop=this,lft=parseInt(this.obj.style.left)-this.Speed;
this.obj.style.left=lft+'px';
if (lft<this.mm[0]){
this.obj.style.left=this.mm[1]+'px';
}
this.to=setTimeout(function(){ oop.Rotate(); },20);
}

var M1=new Marquee({
ID:'marquee2',
Speed:2
});

var M2=new Marquee({
ID:'marquee1'
});

/*]]>*/
</script>
</body>

</html>