Search code examples
javascripthtmlcsslayoutcursor-position

Creating layout for user leave-intent

I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).

An example

When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.

Is it handled via javascript - detect the cursor position and change the layout.

Any help would be welcome.

Solution

  • Using document mouseleave and mouseenter you can achieve this.

    $(document).on('mouseleave',function(){
    $('#test').removeClass('disnone');
}).on('mouseenter',function(){
    $('#test').addClass('disnone');
});

    FIDDLE DEMO