Question

I’ve made a hover function with jquery. All works fine in FireFox and Chrome, the problem is in IE. I change the css top/left and use jquery.show to make the div visible. Though in IE the first time you hover it, it shows at the wrong position. Second time it shows just fine..

var x = (e.pageX - this.offsetLeft) - $(this).next("div").width();
var y = e.pageY - this.offsetTop;



$(this).next("div").css({ display: 'block', 'position': 'fixed', zIndex: 2, left: x, top: y });

$(this).next("div").show("slow");

Again it works great in Chrome and Firefox, but IE..(I only tested IE9)

this is the CSS the div’s have by default to hide it:

display:none;
position:fixed;
z-index:2;   

Answer 1

You are running into this problem because the div hasn’t fully loaded when you calculate x. jQuery doesn’t know what the width of the div will be and thus returns 0. The next time, of course, the div has loaded, and jQuery gets the width right.

You can correct this by setting right instead of left. This improves the animation as well, in my opinion:

http://jsfiddle.net/gilly3/gup8u/22/

$('.linkin').hover(function(e) {
    var x = document.documentElement.offsetWidth - e.pageX;
    var y = e.pageY;

    $(this).next("div").css({
        right: x,
        top: y
    }).stop(true, true).show("slow");
},
function() {
    $(this).next().addClass('tooltip').stop(true, true).hide("slow");
});