CODEWITHSUNDEEP
javascriptjqueryhtmlcssmarquee
user3218194
user3218194

Reputation: 458

Marquee movement should stop on mouseover and start on leave?

       <marquee direction="up" scrollamount=2 id="whatshappening">
    <ul>
       <li class="Whats-Happening-row" >
        <p class="Donationmade"><span></span><a href="#">Ravi Donated for Storm in Bangalore</a></p>
        <p class="underlinewhatsHappening"></p>
      </li>
      <li class="Whats-Happening-row ">
        <p class="Donationmade"><span></span><a href="#">Ravi Donated for Storm in Bangalore</a></p>
        <p class="underlinewhatsHappening"></p>
      </li>
     </ul>
        </marquee>

Hi ppl,

I'm using a simple marquee to move my text upwards.when it is moving onmouseover of each li tag all the li should stop rotating since the link can be view and when i mouse out of it, It should resume moving in the upward direction. Can you kindly tell me how to proceed using JQUERY ??? . Thanks in advance.

Upvotes: 1

Views: 4074

Answers (5)

Sud
Sud

Reputation: 27

<script type="text/javascript">
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
        var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        // At least Safari 3+: "[object HTMLElementConstructor]"
        var isChrome = !!window.chrome && !isOpera;   // Chrome 1+
        var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6
        function MarqueStart() {

            if (isChrome) {
                mrq.start();

            }
            else {
                mrq.setAttribute('scrollamount', 0, 0);

            }
        }
        function MarqueStop() {
            if (isChrome) {
                mrq.stop();
            }
            else {
                mrq.setAttribute('scrollamount', 2, 0);
            }
        }


    </script>

Upvotes: 1

crispx
crispx

Reputation: 1

marquee mouseover has been broken in firefox since: v27 link:bugzilla.mozilla.org/show_bug.cgi?id=984040 So most suggested fixes won't help. Found an answer here, but it broke everything else: link:support.mozilla.org/en-US/questions/987386 While stumbling around I hacked together a fix that worked in current versions of ff,ie,chrome. Here is the jsfiddle: http://jsfiddle.net/atlbike/9snwd6ga/8/

     <marquee id="myMarquee" onMouseOver="this.setAttribute('scrollamount',  0, 0);" OnMouseOut="this.setAttribute('scrollamount', 2, 0);" >Hello Go on... hover over me!</marquee>

Jquery example:

$("#myMarquee").mouseenter(function(){
  document.getElementById("myMarquee").stop();
});
$("#myMarquee").mouseleave(function(){
  document.getElementById("myMarquee").start();
});

Basically, I found that jquery calls to stop/start would work when using the fix from the mozilla site. I also had to fix the recent chrome bug that ignored dynamic scaling. I'll put both on my blog soon. You can see the fixes here: atlbike.org Don't know if the links will work here, don't recall if I've ever posted here? HTH

Upvotes: 0

Gulan
Gulan

Reputation: 84

Try this

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Puting mouse over me</marquee>

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

You can use scrollAmount = 0 to do the trick. It will stop the tag from moving

   <marquee onmouseover="this.scrollAmount = 0;" onmouseout="this.scrollAmount = 2" direction="up" scrollamount=2 id="whatshappening">

Demo

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

Use onmouseover="this.stop();" and onmouseout="this.start();":

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">code here</marquee>

Working Demo

Upvotes: 2

Related Questions