0

My client wants an attractive DIV to show up when someone tries to move their mouse up to close the browser tab, and works cross-platform in the latest browsers.

What is the jQuery technique for detecting that particular kind of mouse movement?

Volomike
  • 23,743
  • 21
  • 113
  • 209
  • Hard to say what's best without some code...mouseenter, mousemove...take a look [at the docs](https://api.jquery.com/category/events/mouse-events/), or if you can provide a fiddle, we may be able to better assist you – Ted Apr 14 '15 at 17:53

1 Answers1

2

You'll need something to determine the users operating system. This can be done by user agent detection. See this SO question: How to check website viewer's operating system?

Then, one option would be to put a fixed position hidden div in that corner and on hover, show your div.

Psuedo code could look like

HTML:

<div id="trigger-div" class="trigger-div"></div>
<div id="annoying-div" class="hidden">PLEASE DON'T LEAVE ME!</div>

CSS:

.hidden {display: none} // may or may not be appropriate. Could use visibility or opacity

.trigger-div {position: fixed; height: 100px; width: 100px; top: 0;}
.trigger-div.windows {right: 0;}
.trigger-div.mac {left: 0;}

Psuedo JS:

jQuery(function () {
    var OS = navigator.platform;

    if (OS === 'MacIntel') {
        jQuery('#trigger-div').addClass('mac');
    } else if (OS === 'Win32') {
        jQuery('#trigger-div').addClass('windows');
    } else {
        // Maybe consider mobile?
        jQuery('#trigger-div').hide();
    }
}

jQuery('#trigger-div').on('hover', function () {
    ('#annoying-div').removeClass('hidden');
});
Community
  • 1
  • 1
Christian Hain
  • 619
  • 4
  • 11
  • I like this, and didn't think of it. It's simple and easy to understand. The only catch would be that I would suggest changing width to like 90% so that one doesn't accidentally trigger it while moving towards doing any scrollbar activity. I'd also recommend a shorter height on the DIV (like 4px), and make it invisible and always on top, unless it would interfere with things that need to be clicked below it. – Volomike Apr 14 '15 at 18:01
  • Make whatever changes you need to fit the design. :) – Christian Hain Apr 14 '15 at 18:05