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)
});
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));