Because of the nature of AJAX applications, and the fact that the server can send down data to the client without the client initiating anything, often times updates go unnoticed. I suppose its a force of habit — why would a page change, if we’re not looking at it?

When the page IS changing though, it would be nice to have some way to say “Hey! You! I’m different now!”. This especially true with MF, when new threads or posts arrive. So I was working today on building a notification system. Get an update, play a sound, flash the title bar. Thats easy enough; But then we hit the problem of it being annoying, if it went off every time there was an update anywhere, it would be going off even when you yourself made a post.

So I was faced with the problem of being able to figure out whether or not the person is actively looking at the page or not. If they are, leave them alone — they can see with their own eyes that updates are occurring. We only want to do something if they are in another tab, or don’t have the browser visible at all.

I thought it would be as easy as a simple “if (window.hasFocus()) { notify(); }” but alas, no such thing exists. So after failed googling and asking on several forums, I eventually came up with the following test case, that works:


  <body onblur="lostFocus();" onfocus="gainedFocus();">
      <script type="text/javascript">
    
      var windowIsActive;
      
    function lostFocus()
    {
      windowIsActive = false;
    }
    
    function gainedFocus()
    {
      windowIsActive = true;
    }
      
    </script>
  
    </body>

So we’ll just keep a global variable around to store the state of the page ourselves, since the window object doesn’t have anything like that. “window” wouldn’t work anyway, since the window encompasses the entire browser window, which includes ALL the tabs. We want our page only. Using the onblur and onfocus events of the body element work magically. Then whenever its time to notify the user of changes, we’ll just do a quick test:

if (windowIsActive) { notify(); }

Viola. Why this functionality wasn’t included in the DOM is beyond me.


2 Responses to “How to determine user focus”  

  1. 1 johnww2

    What would be even nicer is some kind of timer that tracks user mouse actions. If the user has not moved the mouse / clicked for more than 2 mins, than amp down the pings on server - by as much as 10 mins or even just stop pinging after some timeout.

    One thing that bothers me about mf is that all the clients may keep pinging the server, and the suboptimal case is where multiple users decided to leave their browsers pointed at the forum when they left their computer on and went somewhere else.

    This does things like generate huge log files on the server end with all those dead pings.

    p.s. totally unrelated:

    your paypal donation icon link links to DL the forum, rather than going to a page where I can give you money.

  2. 2 Brian

    I agree, thats a pretty good idea. Wouldn’t be too difficult to implement either, as the functionality to track the user focus is included there in the notification code.

    And thanks for the heads up about the paypal link, and thanks for the donation as well! Really awesome :)

Leave a Reply



 

Bad Behavior has blocked 14 access attempts in the last 7 days.