CODEWITHSUNDEEP
javascriptjqueryhtmlcssmarquee
Howdy_McGee
Howdy_McGee

Reputation: 10673

Hover Over to Pause Marquee

I want to create a Marquee that scrolls some news articles but when the user hovers over it I need it to pause and when the user hovers out of it (onMouseOut) I need it to start back up. This did not work:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()">Text</marquee>

Does anyone have any suggestions on how I can achieve this in a minimal amount of code?

Upvotes: 22

Views: 125720

Answers (8)

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

Although the onmouseover and onmouseout function may work on some browser.

Please note that marquee tag is outdated and can say dead.

In this era of semantic html we should use html to structure content. CSS should be sued for Visual styling and if required the CSS should be powered by Javascript.

CSS3 way of achieving marquee affect.

Upvotes: -1

wesbos
wesbos

Reputation: 26317

The marquee tag has an attribute called scrollamount which controls how fast it goes. All we need to do is set the value to 0 when we hover in and set it back to 5 when we mouse out.

DEMO: http://jsfiddle.net/U9yFj/

$(function() {
    $('marquee').mouseover(function() {
        $(this).attr('scrollamount',0);
    }).mouseout(function() {
         $(this).attr('scrollamount',5);
    });
});

Upvotes: 23

Fadi
Fadi

Reputation: 307

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

Upvotes: 18

RAHUL RAWAT
RAHUL RAWAT

Reputation: 1

You have to add ; to your code after closing the () .

Upvotes: -1

Jiwan
Jiwan

Reputation: 31

You can simply use the HTML marquee markup with

onmouseover="stop()"

followed by

onmouseout="start()"

Upvotes: 0

nipek
nipek

Reputation: 850

<marquee id="mq" direction="right" loop="true" onmouseover="this.stop();" onmouseout="this.start();">
    <a href="http://google.com">Google</a>
    <input type="text" id="txt" />
    <input type="button" id="btn" value="Click here" onclick="alert(txt.value);" />
    Some other text here</marquee>

Upvotes: 2

Abbas
Abbas

Reputation: 560

<marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.setAttribute('scrollamount',0);" onmouseout="this.setAttribute('scrollamount',5);">
 Your name, your address, your details scrolling through line
</marquee>

Hope this code will help someone who is use MARQUEE tag.

Upvotes: 4

Leo
Leo

Reputation: 5235

<marquee onmouseover="this.stop();" onmouseout="this.start();">
my text here
</marquee>

You're using wrong case: onMouseOver,onMouseOut

Upvotes: 50

Related Questions