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?

Answer 1

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.