[Javascript] JS Marquee Scroller Question

Roger Roelofs rer at datacompusa.com
Wed Aug 2 20:22:25 CDT 2006


tedd,

On Aug 2, 2006, at 6:33 PM, tedd wrote:

> I modified some code I found and it appears to work, but it has a 
> couple of quirks.
>
> The demo is at:
> http://xn--ovg.com/marquee
>
> It works on my Mac in Safari and FireFox. IE get's it wrong, but 
> what's new there? Opera continues to have problems with several 
> things.

Did you change the page since this email?  the page now only works in 
ie win/mac because it uses the marquee element which no other browser 
supports.  In fact, if you aren't worried about validation, you could 
do this entirely without javascript, but I wouldn't recommend it :-).

To do a scroller in javascript you just need something like this...  
(off the top of my head and untested.  Hey, you get what you pay for 
:-)  You will have to adjust with widths to fit your situation. )  
Chris Heilmann did a write-up on this a while back.  His is a little 
different, but the same principles apply 
<http://www.wait-till-i.com/index.php?p=120>

------  html  ----------
<div id="scroller">
   <ul>
	<li><img src="images/1.jpg"></li>
	<li><img src="images/1.jpg"></li>
	<li><img src="images/1.jpg"></li>
	...
   </ul>
</div>
-----  css ----------
#scroller {
   height: 84px;
   width: 300px;
   overflow: hidden;
}
#scroller ul {
   display: block;
   width: 500px;
}
#scroller li {
   display: inline;
}
-------  js  --------
var marginLeft = 0;
function moveIt() {
   var el = document.getElementById("scroller");
   el = el.getElementsByTagName("UL")[0];
   if (el) {
     el.style.marginLeft = marginLeft + "px";
     marginLeft -= 10;
     if ( marginLeft < -500 ) maraginLeft = 0;
   }
}
window.onload = function() {
   var intervalID = window.setInterval(moveIt, 50);
}


-- 
Roger Roelofs
Datacomp Appraisal Services




More information about the Javascript mailing list