SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    0 Post(s)
    0 Thread(s)

    Mouse hover question

    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:
    Code JavaScript:
    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.

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    7 Post(s)
    1 Thread(s)
    The hover event works by using mouseenter and mouseleave, I think.
    That might mean that the mouse never enters, and so the function isn't triggered.

    Try this:

    Code JavaScript:
    var hovered = false;
    jQuery("#fancybox-overlay").mouseover(function() { 
        alert("hi"); //Test
        hovered = true;
    }).mouseout(function() {
        hovered = false;

    That might not be the nicest solution though, as it will now set hovered to true every single time you move the mouse while the fancybox is displayed. And the mouseout event may also not be triggered.

    You best bet is probably to change the fancybox code to set and unset the hovered variable.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts