HTML/JavaScript: How to stop marquee onload, and start on mouseover?

John Smith picture John Smith · Mar 6, 2013 · Viewed 35.8k times · Source

I'm using the following HTML piece of code to scroll text horizontally:

<marquee behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>

The issue I have is that once you visit the page, the marquee starts scrolling automatically. What I want to do, is to freeze the marquee until you mouseover.

Answer

Jon P picture Jon P · Mar 6, 2013

I'm going to sound condescending here...

Its 2013. The marquee tag is dead. It is browser specific. It is just plain wrong and was a mistake to begin with.

In the modern era of semantic html one should be using html to define content. Visual styling should be applied with CSS and visual effects with CSS supplemented with javascript if required.

See this article for a biref overview of a modern approach.

There are pure CSS3 approaches: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/

and probably best for you: javascript (and jQuery) solutions: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/. Note: the examples in the linked solution use the marquee tag, but you are not limited to using the marquee tag. You can use any valid jquery selector.