horizontal Marquee

[bluetoother]

I found that scrolling images in normal <marquee> tag horizontally is causing the images not to appear correctly.Though Google i found alot of ready build tools to do that scroll using javascript, but i want some tutorial to learn doing this since there is alot of customization to a ticker that i want to build.Any one can guide me ?

[Synook]

<marquee> is actually invalid HTML. Funnily enough, on IM someone just asked me this question. I put together some quick JS (it only works in FF and IE), dissect it if you want:

<script type="text/javascript">		var length;		function move() {			inner = document.getElementById("marquee");			margin = parseInt(inner.style.marginRight.substr(0, inner.style.marginRight.length - 2));			if (inner.offsetLeft < 0 - length) margin = 0 - length;			inner.style.marginRight = (margin + 2) + "px";		}		window.onload = function() {			setInterval("move()", 18);			window_width = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;			length = window_width - document.getElementById("marquee").offsetLeft;		}	</script>

<div style="text-align:right; overflow:hidden; margin-left:-500px; "><span id="marquee" style="margin-right:0px;">This is a marquee! Some long text can go here</span></div>

[aspnetguy]

Dynamic Drive also has a nice script http://dynamicdrive.com/dynamicindex2/cmarquee2.htm it works in FF1+ IE5+ Opr7+

[amitamberker]

<marquee> is actually invalid HTML. Funnily enough, on IM someone just asked me this question. I put together some quick JS (it only works in FF and IE), dissect it if you want:

<script type="text/javascript">		var length;		function move() {			inner = document.getElementById("marquee");			margin = parseInt(inner.style.marginRight.substr(0, inner.style.marginRight.length - 2));			if (inner.offsetLeft < 0 - length) margin = 0 - length;			inner.style.marginRight = (margin + 2) + "px";		}		window.onload = function() {			setInterval("move()", 18);			window_width = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;			length = window_width - document.getElementById("marquee").offsetLeft;		}	</script>

<div style="text-align:right; overflow:hidden; margin-left:-500px; "><span id="marquee" style="margin-right:0px;">This is a marquee! Some long text can go here</span></div>

Synook, how I can stop the marquee on mouse over / hover ??? And by the way, how to make the the information start displaying one by one instead of showing everything at once? I mean, upon publishing the page - This is a marquee! Some long text can go here directly shows-up instead of coming one by one... Am I making sense???

[Synook]

Umm... you can stop on mouseover by assigning a name to the interval, and calling clearInterval() in the division's mouseover handler. Then you can recall the setInterval on mouseout.I sort of get your second question but I can't think of a way right ATM.