SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to check if popup window is focused?

    Hello,

    If we have a popup window open and it is not in focus how can we check it? If the popup is not in focus and the user is looking at something else I want to play a "beep" sound using <embed>. However if they are focused on the popup I do not wan to play this "beep" sound.

    To explain in further detail I have a Instant Messenger running and if the user does not have the IM focused and they get a new message there is no way in letting them know. So I thought a "beep" sound would be nice. I found a way to simply focus() the window, however don't think many will like that.

    Any help would be appreciated.

    Thank you
    Reply With Quote

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. Google does this with Gmail via their messenger. They also do something similar with Calendar when you have an event that is about to happen.
    Try managing state by toggling a flag using on the window's blur and focus event.
    Code:
    var playSound = false;
    window.onblur = function() {
      playSound = true;
    };
    window.onfocus = function() {
      playSound = false;
    };
    
    
    // in your notification function
    function notify() {
      if (playSound) {
        sound.play(); // or whatever function you have
      }
    }

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, you could try tracking the onFocus and onBlur events of the window's body element

    Code:
    <html>
    <head>
    <script>
    var hasFocus;
    function focusState(state) {
    hasFocus = state;
    alert(hasFocus)
    }
    </script>
    </head>
    <body onFocus = "focusState(true)" onBlur="focusState(false)">
    
    </body>
    </html>
    that seems to work

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the window and body will both do the same thing. They each have 'focus' and 'blur' events. It's also best that keep script out of the html. The best approach would be like this:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Test</title>
        <script>
        function addEvent(el, type, fn) {
          if (window.addEventListener) {
            el.addEventListener(type, fn, false);
          } else if (window.attachEvent) {
            el.attachEvent('on'+type, fn);
          }
        }
        addEvent(window, 'load', function() {
          var playSound = false;
          window.onblur = function() {
            playSound = true;
          };
          window.onfocus = function() {
            playSound = false;
          };
    
    
          // in your notification function
          function notify() {
            if (playSound) {
              sound.play(); // or whatever function you have
            }
          }
        });
        </script>
      </head>
      <body>
        <h1>Test</h1>
      </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •