CODEWITHSUNDEEP
javascriptjqueryinternet-explorermouseup
Kirill Gagarski
Kirill Gagarski

Reputation: 365

jQuery: mouseup + position: absolute + show(). Problems in IE

I am trying to implement a popup that appears when user selects some text in specific <div>. The tooltip is a <div> with display: none and position: absolute CSS properties at the bottom of the page.

In mouseup event handler for selectable div I am doing the following:

$("#popup").css({
    top: e.pageY,
    left: e.pageX
}).show();

Here's a working JS fiddle: http://jsfiddle.net/6r4Lrgmv/

It works fine in Chrome and Firefox but Internet Explorer (I have tested on version 9 and 11) selects text on page till the bottom. What am I doing wrong? Is there a workaround for this issue?

Upvotes: 0

Views: 172

Answers (1)

Jan
Jan

Reputation: 1414

My guessed explanation: when showing the popup, IE thinks your mouse cursor is actually inside the popup. So it selects the text to the end of the page.

I found two possible solutions (tested with IE 11):

  • Add +1 to the popup position. This way the popup does not appear directly under the mouse cursor.

    $("#popup").css({
    top: e.pageY + 1,
    left: e.pageX + 1
}).show();

  • Use setTimeout. This way the popup is shown after the event is finished (at the end of the current event queue).

    setTimeout(function() {
    $("#popup").css({
        top: e.pageY,
        left: e.pageX
    }).show();
});

Upvotes: 2

Related Questions