Various speed problems with hoverIntent

Question

I am having some problems with getting hoverIntent working properly.

Problems keep appearing:

• Often, when I change to another div, the hover will not appear as a result of the mouseover. If I move it a bit, it will not appear. I have to take the mouse outside, and then in again to get it working.

• Once in a while, the opacity is very low, and the size is wrong. It seems to have frozen in a last stage of the slideUp()-part. I have to refresh page to get it working...

     $(".info").hoverIntent({
              over: show, 
              out: hide
          });
  
  function show(){ 
      if($("#inndato").html() == " ") {
          // To give the popup-div position close to the mouseover-div 
          var position = $(this).position();
          $("#arrinfo").css( { "left": (position.left + $(this).width()) + "px", "top":position.top + "px", "position":"absolute" } );
          $("#arrinfo").html(ajax_load).load(loadUrl);
          $("#arrinfo").show();
      }
  }
  
  function hide(){ 
      $("#arrinfo").stop().slideUp("fast");
  }

I have a lot of div's (calendar -> days), and those assigned to the info-class should activate the pop-up-div with the id #inndato.

Answer 1

i think your physical .show() at the end can execute before the Ajax returns. i moved your Show() function into the 'success' section of the .load() call. I made one assumption that 'ajax_load' was the return result and was a typo on your part. if there is something going on with the 'ajax_load' variable I apologize and you can let me know.

function show(){ 
        if($("#inndato").html() == " ") {
            // To give the popup-div position close to the mouseover-div 
            var position = $(this).position();
            $("#arrinfo").css( { "left": (position.left + $(this).width()) + "px", "top":position.top + "px", "position":"absolute" } );
            //below duplicates the work of 'load', unless something special is in ajax_load               //that i don't know about
    //$("#arrinfo").html(ajax_load).load(loadUrl);
    //i think you mean this
           $("#arrinfo").load(loadUrl, function(data,text,xhr){
                //$("#arrinfo").show(); but try below first...
                $(this).show();
          });

        }
    }