I’m trying to implement some jquery to prevent mousewheel scrolling when a jQuery fancybox window is open for the background content.
I’ve got the jQuery mousewheel plugin installed but no matter what I can not get this to work with the overlay div.
Here is the code that I currently have:
jQuery("#fancybox-overlay").hover(function() {
alert("hi"); //Test
hovered = true;
}, function() {
hovered = false;
});
jQuery(window).bind("mousewheel", function() {
if (hovered === true) {
return false;
}
});
With this code, when I open a fancybox window, and hover over the overlay (which is 100% width, height, except for the fancybox itself) nothing happens, don’t get the alert message indicating the hover event has been triggered.
If I apply this same code to a normal div on my website, and hover over it then this alert message will display, and scrolling will be disabled when the cursor is within the confines of the div.
Any ideas why I can’t achieve the "hover’ event with the overlay div? Or suggestions on how to get this to work?
Many thanks.