1

js and I want to pause the slider when mouse hover the h1 tag but it doesn't, I know that it's a problem with javascript but I'm not able to make it works

http://jsfiddle.net/2dhkR/405/

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3'],
        loopBottom: true,
        afterRender: function() {
            setInterval(function() {
                $.fn.fullpage.moveSlideRight();
            }, 3000);
        }
    });


    // the function - set var up just in case
    // the timer isn't running yet
    var timer = null;

    function startSetInterval() {
        timer = setInterval(showDiv, 5000);
    }
    // start function on page load
    startSetInterval();

    // hover behaviour
    function showDiv() {
        $('#fullpage h1').hover(function() {
            clearInterval(timer);
        }, function() {
            startSetInterval();
        });
    }

});

Any help would be appreciated, Thanks

colapsnux
  • 872
  • 2
  • 15
  • 32

3 Answers3

2

Very simple way (maybe not the clearest) with a bool:

var go = true;

if (go)$.fn.fullpage.moveSlideRight();

$('#fullpage h1').hover(function() {
        go = false;
        clearInterval(timer);
    }, function() {
        go = true;
        startSetInterval();
    });
Matteo
  • 158
  • 6
  • I get the following error : - ReferenceError: timer is not defined - ReferenceError: startSetInterval is not defined.. Can you update the fiddle with working version please ? http://jsfiddle.net/2dhkR/405/ – colapsnux Jan 27 '17 at 10:50
  • Sorry, I didn't explain where you have to add :) Here's the fiddle http://jsfiddle.net/2dhkR/410/ – Matteo Jan 27 '17 at 10:57
2

http://jsfiddle.net/2dhkR/407/

var interval = undefined;
$(document).ready(function() {

    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3'],
        loopBottom: true,
        afterRender: function() {
           interval = setInterval(function() {
                $.fn.fullpage.moveSlideRight();
            }, 100);
        }
    });
  $('#fullpage h1').mouseover(function() {
    clearInterval(interval);
    interval = null;
  })
   $('#fullpage h1').mouseout(function() {
             interval = setInterval(function() {
                $.fn.fullpage.moveSlideRight();
            }, 100);
  });


}); // end document ready
R. S.
  • 402
  • 5
  • 17
0

Try to use jQuery's hover() on mouseenter, then start the slider again on mouseleave.

$(function() {
var interval = setInterval( slideSwitch, 10000 );

$('#slideshow').hover(function() {
    clearInterval(interval);
}, function() {
    interval = setInterval( slideSwitch, 10000 );
});

});

Waheed Khan
  • 72
  • 9