SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery issue on a menu

    I'm a bit embarrassed to ask this question because it would require looking at the code soup of the project I'm working on. There's a long story about that. None the less, the jquery script is in the code.

    It's very inefficient but I haven't dived heavily into the library yet. The menu on this site is set up to display and hide divs on mouseover. When you move the mouse over the links too quickly, the divs all show on top of one another. This should not happen. Any suggestions on how to fix this?

    http://estevancarlos.kodingen.com/aviahack/

    For example, move over the "Medical Services, Global Programs, Media Center, About" rapidly and you'll see.

    Code:
    jQuery('.hiv_btn').mouseover(function(){
        jQuery('.hiv_menu').delay(550).fadeIn("slow");
        jQuery('.global_menu').hide();
        jQuery('.about_menu').hide();
        jQuery('.media_menu').hide();
        jQuery('.services_menu').hide();
        jQuery('.action_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.hiv_btn').css("background-color","#c44142");
        jQuery('.services_btn').css("background-color","#2b1e16");
        jQuery('.global_btn').css("background-color","#2b1e16");
        jQuery('.about_btn').css("background-color","#2b1e16");
        jQuery('.media_btn').css("background-color","#2b1e16");
        jQuery('.action_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.global_btn').mouseover(function(){
        jQuery('.global_menu').delay(550).fadeIn("slow");
        jQuery('.hiv_menu').hide();
        jQuery('.about_menu').hide();
        jQuery('.media_menu').hide();
        jQuery('.services_menu').hide();
        jQuery('.action_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.global_btn').css("background-color","#c44142");
        jQuery('.services_btn').css("background-color","#2b1e16");
        jQuery('.hiv_btn').css("background-color","#2b1e16");
        jQuery('.about_btn').css("background-color","#2b1e16");
        jQuery('.media_btn').css("background-color","#2b1e16");
        jQuery('.action_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.about_btn').mouseover(function(){
        jQuery('.about_menu').delay(550).fadeIn("slow");
        jQuery('.hiv_menu').hide();
        jQuery('.global_menu').hide();
        jQuery('.media_menu').hide();
        jQuery('.services_menu').hide();
        jQuery('.action_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.about_btn').css("background-color","#c44142");
        jQuery('.services_btn').css("background-color","#2b1e16");
        jQuery('.hiv_btn').css("background-color","#2b1e16");
        jQuery('.global_btn').css("background-color","#2b1e16");
        jQuery('.media_btn').css("background-color","#2b1e16");
        jQuery('.action_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.media_btn').mouseover(function(){
        jQuery('.media_menu').delay(350).fadeIn("slow");
        jQuery('.hiv_menu').hide();
        jQuery('.global_menu').hide();
        jQuery('.about_menu').hide();
        jQuery('.services_menu').hide();
        jQuery('.action_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.media_btn').css("background-color","#c44142");
        jQuery('.services_btn').css("background-color","#2b1e16");
        jQuery('.hiv_btn').css("background-color","#2b1e16");
        jQuery('.global_btn').css("background-color","#2b1e16");
        jQuery('.about_btn').css("background-color","#2b1e16");
        jQuery('.action_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.services_btn').mouseover(function(){
        jQuery('.services_menu').delay(350).fadeIn("slow");
        jQuery('.hiv_menu').hide();
        jQuery('.global_menu').hide();
        jQuery('.about_menu').hide();
        jQuery('.media_menu').hide();
        jQuery('.action_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.services_btn').css("background-color","#c44142");
        jQuery('.media_btn').css("background-color","#2b1e16");
        jQuery('.hiv_btn').css("background-color","#2b1e16");
        jQuery('.global_btn').css("background-color","#2b1e16");
        jQuery('.about_btn').css("background-color","#2b1e16");
        jQuery('.action_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.action_btn').mouseover(function(){
        jQuery('.action_menu').delay(350).fadeIn("slow");
        jQuery('.hiv_menu').hide();
        jQuery('.global_menu').hide();
        jQuery('.about_menu').hide();
        jQuery('.media_menu').hide();
        jQuery('.services_menu').hide();
        jQuery('#header-feature').hide();
        jQuery('.action_btn').css("background-color","#c44142");
        jQuery('.services_btn').css("background-color","#2b1e16");
        jQuery('.media_btn').css("background-color","#2b1e16");
        jQuery('.hiv_btn').css("background-color","#2b1e16");
        jQuery('.global_btn').css("background-color","#2b1e16");
        jQuery('.about_btn').css("background-color","#2b1e16");
    });
    
    
    jQuery('.media_menu').mouseleave(function(){
        jQuery('.media_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.media_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.about_menu').mouseleave(function(){
        jQuery('.about_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.about_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.hiv_menu').mouseleave(function(){
        jQuery('.hiv_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.hiv_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.services_menu').mouseleave(function(){
        jQuery('.services_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.services_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.global_menu').mouseleave(function(){
        jQuery('.global_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.global_btn').css("background-color","#2b1e16");
    });
    
    jQuery('.action_menu').mouseleave(function(){
        jQuery('.action_menu').hide();
        jQuery('#header-feature').show();
        jQuery('.action_btn').css("background-color","#2b1e16");
    });

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rpeg View Post
    Any suggestions on how to fix this?
    If it was me, my recommendation to whoever asked me to have a look at it would be to ditch the jquery and do it properly with just css, if possible, and/or just plain javascript. With jquery you'll very, very likely be running a lot more code in the background than doing the same thing with plain javascript.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't really see a problem with the rapid hovering (at least in Firefox). A bigger problem I see with this menu is that the top level links are not clickable, meaning that some users (such as those on touch screens) may not be able to access the sub pages or menu at all. Drop lists are pretty hard to make fully accessible anyway, but the top level links should always be clickable as a fall back.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed. This will be addressed.

    Try the rapid hovering a bit more. I thought it was a minor issue but it's been pretty evident on a few browsers.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found the solution. I needed to add .stop(true, true)

    http://www.ianhoar.com/2011/06/05/cl...imation-queue/


Tags for this Thread

Bookmarks

Posting Permissions

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