title: How to find ids which are on screen
body: <p>I have a content like </p>
  
  <pre><code> &lt;div id="sContainer"&gt;
      &lt;div class="message0" id="l0"&gt;Initial Content 111&lt;/div&gt;
      &lt;div class="message1" id="l1"&gt;Initial Content 222&lt;/div&gt;
      &lt;div class="message2" id="l2"&gt;Initial Content 333&lt;/div&gt;
      &lt;div class="message3" id="l3"&gt;Initial Content 444&lt;/div&gt;
      &lt;div class="message4" id="l4"&gt;Initial Content 555&lt;/div&gt;
      &lt;div class="message5" id="l5"&gt;Initial Content 666&lt;/div&gt;
      &lt;div class="message6" id="l6"&gt;Initial Content 777&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LRLR/0sbdttds/" rel="nofollow">http://jsfiddle.net/LRLR/0sbdttds/</a></p>
  
  <p>Even inside div, i have some more divs (not shown)</p>
  
  <p>Is there any which to find which all divs are visible on screen ?</p>
  
  <p>Requirement:
  1. everytime div is focussed, i want to add css property
  2. i need to store a variable</p>