Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 409
John Smith Avatar asked Dec 07 '22 09:12

John Smith


1 Answers

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.

like image 119
Jon P Avatar answered Jan 13 '23 15:01

Jon P