Jump to content
bluetoother

horizontal Marquee

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
<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???

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×