[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