jQuery mouseover hover mouseout remove set variables

Question

I'm using the following to bring in a picture and some text from another page through jquery on a hover over of an area map. I've got it working find when you hover, but when you hover over a new element it loads the last element and then quickly flicks to the new element. How can I clear what it has saved on the mouse out? I've added the mouseout function but I have no idea what to put in it! Any help will be much appreciated.

if (sPage == "fireplan.aspx") {
    jQuery('area').mousemove(function (e) {

        var url = jQuery(this).attr('tooltiphref');

        jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);
        jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")
    });

    jQuery('area').mouseout(function () {



    });


}

Thanks, Tom

Answer 1

The reason for the "flickering" is because the old content is still inside the tooltip window when it moves since your call to .load() will take some time in comparison to moving the tooltip via .css() on the next line.

To avoid this, simply put something like the following inside your mouseout handler:

jQuery('#tooltipwindow').empty()

That will remove what was previously loaded into the tooltip, so its content will simply appear blank. A more ideal approach would be to insert some kind of activity indicator to let the user know that content is loading, like:

jQuery('#tooltipwindow').html('<div class="activityIndicator"></div>')

In this case, you'd just set the class .activityIndicator to have some background image, like an animated GIF of a spinning wheel.

Answer 2

Show the tooltip from the success-callback of load, that way you know your new content has been loaded prior to showing the the tooltip.

jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url, function() {
    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")    
});

Also, if you want to create a hover effect, you probably want to listen for the mouseover-event, instead of the mousemove-event that you are using know with the mousemove() method.

Answer 3

Do you only want to affect the first div? If so, why don't you make your jQuery selector more specific so that it only applies to the first element:

$('area.first_area').mousemove(function(){ });

Answer 4

jQuery('area').mousemove(function (e) {

    var url = jQuery(this).attr('tooltiphref');
    jQuery('#tooltipwindow').empty(); // empty before loading new content
    jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);

    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")
});


jQuery('area').mouseout(function () {
    jQuery('#tooltipwindow').empty();  // empty when mouseout get triggered
});