jquery hover not working properly other than IE6

Question

Hi All,

We developed navigation bar using jQuery 1.4.2. Functionality is to show submneus for different menu items when user hovers on it.

It is working perfectly in IE6 but we see some weird problems in other browsers.

In Firefox, when the page gets loaded, it works fine but when we hit f5, the submenu wont appear on hover. To get submenu we need to click on any other menu item.

In Chrome, its the same to add on, some time even we click on any menu item, and hover submenu wont show up.

In Safari, nothing shows up most of the times, but on clicking 5-6 menu items, submenu is shown.When we see loading text in safari it shows the submenu. but on every click the loading text wont appear..

We are very much confused..is it the browser behavior/code/jquery??

Below is the snippet:

Html:

<ul>
<li><a class="mainLinks" href="google.com">Support</a>
<ul><li>Sublink1</li></ul>
</ul>

Html code is absolutely fine.

Jquery:

var timeout = null;
var ie = (document.all) ? true : false;

$(document).ready(function(){
 var $mainLink = null;
 var $subLink = null; 

 $(".mainLinks").each(function(){ 

  if ($(this).hasClass("current")) {

   $(this).mouseout(function() {
    var $this = $(this);

    timeout = setTimeout(function() {
     $(".popUpNav", $this.parent()).css({
      visibility : 'hidden'
     });
     $('.popUpArrow').hide();
     ieCompat('show');
    }, 200);
   });

  } else {

   $(this).hover(function() {
    reset();
    ieCompat('hide');

    // Saving this for later use in the popUpNav hover event
    $mainLink = $(this); 

    $popUpNav = $(".popUpNav", $mainLink.parent());

    // Default width is width of one column
    var popupWidth = $('.popUpNavSection').width() + 20;

    // Calculate popup width depending on the number of columns
    var numColumns = $popUpNav.find('.popUpNavSection').length;

    if (numColumns != 0) {
     popupWidth *= numColumns;
    }

    var elPos = $mainLink.position();
    var leftOffset = 0;

    if (elPos.left + popupWidth > 950) {
     leftOffset = elPos.left + popupWidth - 948;
    }

    $popUpNav.css({
     top : elPos.top + 31 + 'px',
     left : elPos.left - leftOffset + 'px',
     visibility : 'visible',
     width : popupWidth + 'px'
    });

    $('.popUpArrow').css({
     left : elPos.left + Math.round(($mainLink.width() / 2)) + 20 + 'px',
     top : '27px'
    }).show();


   },
   function() {
    var $this = $(this);

    timeout = setTimeout(function() {
     $(".popUpNav", $this.parent()).css({
      visibility : 'hidden'
     });
     $('.popUpArrow').hide()
     ieCompat('show');
    }, 200);
   }
   );
  }
 });


 $(".subLinks").hover(
  function(e) {
   $subLink = $(this);
   var elPos = $subLink.position();
   var popupWidth = $(".popUpNavLv2",$subLink.parent()).width();
   var leftOffset = 0;
   ieCompat('hide');
   $(".popUpNavLv2",$subLink.parent()).css({
    top : elPos.top + 32 + 'px',
    left : elPos.left - leftOffset + 'px',
    visibility : 'visible'
   });
  },
  function() {
   var $this = $(this);

   timeout = setTimeout(function() {
    $(".popUpNavLv2", $this.parent()).css({
     visibility : 'hidden'
    });
   }, 200);
   ieCompat('show');
  }
 );


 $('.popUpNav').hover(
  function() {
   clearTimeout(timeout);

   $mainLink.addClass('current');
   $(this).css('visibility', 'visible');
   $('.popUpArrow').show();
  },
  function() {
   $mainLink.removeClass('current');
   $(this).css('visibility', 'hidden');
   $('.popUpArrow').hide();
   ieCompat('show');
  } 
 );

 $('.popUpNavLv2').hover(
  function() {
   clearTimeout(timeout);
   $(this).css('visibility', 'visible');
   ieCompat('hide');
  },
  function() {
   ieCompat('show');
   $(this).css('visibility', 'hidden');

  } 
 );

 // If on mac, reduce left padding on the tabs
 if (/mac os x/.test(navigator.userAgent.toLowerCase())) {
  $('.mainLinks, .mainLinksHome').css('padding-left', '23px');
 }
});

Thanks a lot in advance for looking into it.

Thanks | Kranthi

Answer 1

What i usually do is just change display value and animate that. Something like this:

<ul>
    <li><a title="Startseite" href="">Startseite</a></li>
    <li>
        <a title="Informationen" href="">Informationen</a>
        <ul style="display: none;">
            <li>SMS-Box Demo</li>
            <li>Verdienst</li>
            <li>Möglichkeiten</li>
            <li>Häufige Fragen</li>
            <li>Referenzen</li>
        </ul>
    </li>
    <li><a title="Partner" href="">Partner</a></li>
    <li>
        <a title="Über uns" href="">Über uns</a>
        <ul style="display: none;">
            <li>SMS-Box Demo</li>
            <li>Verdienst</li>
            <li>Möglichkeiten</li>
            <li>Häufige Fragen</li>
            <li>Referenzen</li>
        </ul>
    </li>
    <li><a title="Anzeigen" href="">Anzeigen</a></li>
    <li><a title="FAQ" href="">FAQ</a></li>
    <li class="nav_menu_last"></li>
</ul>

And few lines of jquery:

    $(function(){
        $('#nav_menu > .center > ul > li').hover(function() {
            $(this).children('ul:hidden').slideDown('slow');
        }, function() {
            $(this).children('ul:visible').slideUp('slow');
        }).click(function(){ 
            return false; 
        });
    });

Demo is here. I know this does not answer your question, but i just thought to share this, it may help someone... :)

Answer 2

Hi All,

After digging into the code. I found that the problem is coz of the HTML menu code, which is generated dynamically by reading XML. As I told its not loading completely in all browsers but when I take out the generated HTML and run it runs perfectly. I m confused. Is this might be the problem with document not being loaded completely before I call the script.

Is there anything else apart from document.ready to cross check?

Thanks a lot for reading it and please help me out.

Thanks | Kranthi

Answer 3

Hi All,

After further more investigation I found that the document.ready is being fired with out loading the complete document.

$(document).ready(function(){
alert(" Doc Loaded"); //It prints
alert($(".mainLinks").length); // Most of the times it prints 0, some times it prints the exact count.

mainLinks is the class name of which is dynamically generated from XML.

script files included in this order.

 <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="navBar.js"></script> // generates menu
  <script type="text/javascript" src="now.js"></script> //hover functionality

I call showNavBar("","") in the middle of jsp.

Thanks | Kranthi

Answer 4

Hi All,

Finally the issue is resolved. Thanks to the forum and Google!!

Issue was with jquery hover is not able to identify dynamically generated elements in DOM. I used live to overcome this, replaced hover with mouseover and mouseout..

Thank you!!