title: Block element from showing when focus briefly lost
body: <p>I have a page with an <code>iFrame</code> on it.  For the visitor, it's important for them to know if the <code>iFrame</code> has the focus of the browser or not.</p>
  
  <p>To achieve this, when the page loads the <code>iFrame</code> is given focus.  If focus is lost, a div <code>overlay</code> is displayed over the top of the <code>iFrame</code> letting them know focus is lost.  If the <code>overlay</code> is clicked, it's hidden and focus is given back to <code>iframe</code>:</p>
  
  <pre><code>// When overlay is clicked, focus on game
  $('#NoFocusOverlay').click(function () {
      focusOnGame();
  });
  
  // When game loses focus, show overlay
  $('#GameIFrame').blur(function () {
      $('#NoFocusOverlay').fadeIn('fast');
  });
  
  function focusOnGame() {
      $('#GameIFrame').focus();
      $('#NoFocusOverlay').hide();
  }
  </code></pre>
  
  <p>Now the problem is, there are some controls on the page (volume adjustment, change size of iframe etc) that when clicked need to give focus back to the <code>iFrame</code>:</p>
  
  <pre><code>// Change volume of game via control on page
  function changeVol(newVol){
      ... do vol change...
      focusOnGame();
  } 
  </code></pre>
  
  <p>The problem is, when you click the volume control focus is lost, it briefly shows the overlay before focus is re-established and the overlay is hidden.  It doesn't look good the overlay keeping flashing up, is there any way to stop this happening easily?</p>