Page Shadow Effect: Catch the Focus Out Event

Question

Here is what I am thinking:

When a user browses some other page, or uses different application, or to say straight is not actively interacting with the webpage I want to catch this as a event and trigger a fadeIn() function. In this particular case only, I want to fill the page with shadow, which fades out once the user is back.

The question is , How to catch this event, and execute a function?

Created a demo here but I want the shadow to fade in, when the mouseout event triggers in window, but if I do so, when I come back in the body, the window start pulsating.

Answer 1

It's really easy. Just use the blur and focus events on window. You can do whatever you want to show/hide your page shadow in the callbacks. Personally, I'd recommend the BlockUI plugin.

$(function()
{
    var $body = $('body');
    $(window).focus(function () { $body.removeClass('fade'); })
             .blur(function () { $body.addClass('fade'); });
});?

Working example: http://jsbin.com/idipo5/2 (tested in Chrome) (be forewarned, it's really ugly)

---

Edit: I'm pretty this what you're going for. Note how it doesn't unmask if the window is moused-over but doesn't have focus. If you do want it to unmask in this case, you can remove the focused flag and its checks.

Tested in Chrome and FF (IE is a miserable piece of not-worth-my-time):

http://jsbin.com/ufido3

Posting the JS code below, since I'm not sure how long JSBin keeps your stuff around.

---

$(function ()
{
  var $modal = $('#modal'),
      masked = false,
      focused = true;

  function mask()
  {
    if (!masked)
    {
      $modal.fadeIn('fast');
      masked = true;
    }
  }

  function unmask()
  {
    if (masked && focused)
    {
      $modal.fadeOut('fast');
      masked = false;
    }
  }

  $('html').hover(unmask, mask).focus(function (e)
  {
    e.stopPropagation();
    if ($(e.target).is('html')) unmask();
  }).blur(function (e)
  {
    e.stopPropagation();
    if ($(e.target).is('html')) mask();
  });

  $(window).focus(function ()
  {
    focused = true;
    unmask();
  }).blur(function ()
  {
    focused = false;
    mask();
  });
});