Jquery Exit Popup

Question

I'm trying to use this tweak for my blog: http://www.tonylea.com/2011/creating-a-jquery-exit-popup/#comment-909

Basically what it does is the popup should be showing up only when your mouse is moving upward out of the page.

Here's the code:

<script type="text/javascript">

    var oldPosition = -1;
    $(document).ready(function() {
        $(document).mousemove(function(e) {
            $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
            $('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));

            var position = e.pageY - $(window).scrollTop();
            if(position < 10){
                if(oldPosition != -1){
                    if(position < oldPosition){
                        // Show the exit popup
                        // make sure it's moving upward
                            $('#exitpopup_bg').fadeIn();
                            $('#exitpopup').fadeIn();

                    }
                    oldPosition = position;
                }else{
                    oldPosition = position;
                }
            }
            // $('#divData').html(oldPosition + " : " + position);
        });

        $('#exitpopup_bg').click(function(){
            $('#exitpopup_bg').fadeOut();
            $('#exitpopup').slideUp();
        });
    });
</script>

Issue No.1: Although I don't see there's any problem in the code, the popup does also show up when your mouse is moving down into the page, why is this happening?

Issue No.2: When you quickly drag your mouse out of the page, nothing shows up. Well, how do I make sure it also works under this situation?

score 0 · Answer 1 · edited May 23 '17 at 12:04

1) This code is saying if the cursor gets into the top 10 pixels of the page, to show the popup, whether a person is trying to exit or not. The case that when you move down, it's still meeting the condition of being in the top 10 pixels of the page.

2) When you move the mouse quickly, it may not fire the event because it triggers mousemove events at a specific rate, so when the mouse is moved too quickly, the event actually doesn't get captured. There is nothing that can be done, the computer, OS, and browser is what determines this rate.

A recommendation to address this is use the onbeforeunload browser event to ask the user if they want to stay or really leave the page:

Best way to detect when a user leaves a web page?

Thanks for your reply, I kinda find those confirm window annoying for visitors, that's why I would rather go with above codes. — Shane, Dec 25 '12 at 06:17

score 0 · Accepted Answer · answered Dec 25 '12 at 04:24

0

Part of the problem with your script is that you are never resetting oldPosition to -1 when they are not within the 10px range.

If they were outside of the browser moving down, it would set oldPosition to a value. Now take your mouse out of the browser (right, left or bottom) and drag it back through the top down again, your script will fire if the new position is less than the oldPosition even though they are not moving upwards.

To address Issue No.1 make your first if statement contain an else that resets the oldPosition:

if(position < 10){
    ...
} else {
    oldPosition = -1;
}

Issue No.2 is only going to work as fast as the browser can feed your script mousemove events. Not much you can do about that.

answered Dec 25 '12 at 04:24

Jason Whitted

4,059
1
16
16

Thanks mate, but there seems to be still one problem for Issue NO.1 which cannot be solved: if your mouse moves up from 9 px to 8 px, the popup would show up and then you click to make the popup go away, and then you quickly drag your mouse out of the page(which means `oldPosition` stays at `8`), after that when your mouse moves down from the top, there's no way to reset `oldPosition` to `-1`, therefore the popup would still show up(the code would mistakenly think you moves up from `8` to `1`). This probably won't happen much for normal users, but is there a perfect solution for this too? – Shane Dec 25 '12 at 06:27
When they click to close down the popup, just reset the `oldPosition` back to -1, then it won't matter how fast they move their mouse :) – Jason Whitted Dec 25 '12 at 06:39
I've tried but it doesn't work. You can add `$('#divData').html(oldPosition + " : " + position);` to both functions and add `
` at the end of the script to see the output. You will find when you click within the top 10 px, `oldPosition` never gets reset to `-1`, my guess is function `mousemove` takes effect very quickly after your click and immediately set `oldPosition` to `position` which is `8`, so you would never be able to reset it to `-1` within the top 10px... – Shane Dec 25 '12 at 06:50
I assumed you were having them click the hyperlink to close the dialog -- not clicking the background. Allowing them to click the background to close does provide them the edge case that they could immediately reopen it again if they were within the 10px buffer. To prevent that you could create a variable to disable the functionality. Use a `setTimeout` to re-enable it after `x` seconds have elapsed. – Jason Whitted Dec 25 '12 at 06:59

Jquery Exit Popup

2 Answers2