Databases
StackOverflow2013
Postsdbo
POsetInterval with jQuery - pause on mouseenter and resume on mouseleave
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsetInterval with jQuery - pause on mouseenter and resume on mouseleave
    primarykey
    data
    text
    <p>I wrote a function in jQuery that rotates a series of text blocks like a carousel. I'm using <code>setInterval</code> to start a timer that runs in a loop, which starts automatically on page load, pauses for <code>mouseenter</code> events, and then is supposed to resume on <code>mouseleave</code> events.</p> <p>The pausing works for the FIRST instance, but if you enter your mouse over <code>div.testimonials</code> a second time, the function does not pause. Here's my HTML:</p> <pre><code>&lt;div class='testimonials'&gt; &lt;div class='testimonials-users row hidden-phone'&gt; &lt;div class='span1'&gt; &lt;a class='testimonials-user-w active' data-toggle='testimonial' href='#testimonial1'&gt; &lt;span class='testimonials-user'&gt;&lt;img alt="Avatar-1" src="images/test-user.png" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class='span1'&gt; &lt;a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial2'&gt; &lt;span class='testimonials-user'&gt;&lt;img alt="Avatar-2" src="images/test-user.png" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class='span1'&gt; &lt;a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial3'&gt; &lt;span class='testimonials-user'&gt;&lt;img alt="Avatar-4" src="images/test-user.png" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='testimonials-speeches'&gt; &lt;div class="testimonials-speech active" id="testimonial1"&gt; &lt;p&gt; &lt;strong&gt;Homer Simpson is amazing.&lt;/strong&gt; I've worked with Homer on couple of projects and i really like how lazy he is. Sleeps a lot, does not compain much, a perfect employee. &lt;/p&gt; &lt;div class="speech-by"&gt; Mr. Burns, Springfield Nuclear Power Plant &lt;/div&gt; &lt;/div&gt; &lt;div class='testimonials-speech' id='testimonial2'&gt; &lt;p&gt; &lt;strong&gt;Nulla gravida tellus id fermentum.&lt;/strong&gt; Phasellus aliquet lobortis dolor, vel aliquam tortor porta vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. &lt;/p&gt; &lt;div class='speech-by'&gt; John Doe, Dundler Mufflin &lt;/div&gt; &lt;/div&gt; &lt;div class='testimonials-speech' id='testimonial3'&gt; &lt;p&gt; &lt;strong&gt;Aliquam at sodales arcu.&lt;/strong&gt; Nulla gravida, tellus id fermentum tempus, urna elit tempus justo, a tincidunt dui lacus nec est. Maecenas ligula ipsum, suscipit quis posuere id, porttitor vitae odio. Phasellus cursus mauris nec felis sollicitudin ac semper quam hendrerit. Morbi sagittis lobortis libero id imperdiet. &lt;/p&gt; &lt;div class='speech-by'&gt; John Doe, Dundler Mufflin &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>...and here is my jQuery:</p> <pre><code>$(function () { var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000); // set interval timer function abortTestimonialTimer() { // to be called when you want to stop the timer clearInterval(rotateTestimonialTimer); } function rotateTestimonials() { // Speeches var activeSpeech = $('.testimonials-speeches .testimonials-speech.active'); // If last, loop to first if($('.testimonials-speeches .testimonials-speech').last().hasClass('active')) { var nextSpeech = $('.testimonials-speeches .testimonials-speech').first(); } else { var nextSpeech = activeSpeech.next('.testimonials-speech'); } var nextSpeechId = nextSpeech.attr('id'); // Users var activeUser = $('a.testimonials-user-w.active'); var nextUser = $('a.testimonials-user-w[href*="' + nextSpeechId + '"]'); // Swap active class activeSpeech.removeClass('active'); activeUser.removeClass('active'); nextSpeech.addClass('active'); nextUser.addClass('active'); } $('div.testimonials').on('mouseenter', function(){ // Pause on mouseenter abortTestimonialTimer(); }); $('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000); }); }); </code></pre> <p>Any idea why this only pauses the first time? I think it has something to do with my starting and stopping of the timer. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USadamdehaven
    1. USadamdehaven
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload