Search code examples
jqueryscrollhoverhoverintent

Prevent Jquery hoverIntent during mouse wheel scrolling


I am working on a stock footage gallery. I have a page of thumbnail images. When the user hovers over a thumbnail, the corresponding video pops up (in a jquery dialog). I noticed that when I scroll the page using the mouse wheel, my cursor often passes quickly over a lot of images and I get a bunch of videos popping up and disappearing rapidly one after another, which is undesirable. So I added some code to detect for scrolling, which solves the issue - except that when the scrolling stops, if the cursor ends up resting over one of the images, that popup video is not triggered. I have to move the mouse onto another image in order to trigger a pop-up. Is there anything that I can add or change in order to trigger the video, should the cursor land on a gallery image at the end of the scrolling? I am using hoverIntent, but the same thing applies to the standard jquery hover. The relevant sections of code are:

var notScrolling = true;

$(window).scroll(function() {
        notScrolling = false;
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        notScrolling = true;
    }, 250));
});

// When the window is not being scrolled, and the mouse enters a gallery item,
// the corresponding pop-up will open and any other pop-up will be closed:
$.each(galleryAnchorArray, function( index, value ){
        var galleryThis = value;
        var hoverThisAndCloseOthers = function() {
            hoveringId = index;
            if (notScrolling == true) {OpenPopup(); CloseOthers()}};
        $(galleryThis).hoverIntent(hoverThisAndCloseOthers, hovOutDoNothing)
    });

Solution

  • When scrolling stops over an image the hover event for that image has already occurred and your if (notScrolling == true) has blocked it, so what you need to do is trigger the hover event again like

    $.data(this, 'scrollTimer', setTimeout(function() {
        notScrolling = true;
        //your hover event or function corresponding to that event here
        hoverThisAndCloseOthers();//just an eg. how you use this is up to you
    }, 250));