title: Floating div in html page
body: <p>there is a div,</p>
  
  <pre><code>&lt;div id='show' style='display:none;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I edit some contents to through javascript like,</p>
  
  <pre><code> document.getElementById('show').innerHTML = el.innerHTML;
   document.getElementById('show').title = el.innerHTML;
  </code></pre>
  
  <p>Also this div is shown at a mouse over.
  How ever the user scrolls the page the div should appear in the the view at the bottom.How can this be achieved.</p>
  
  <p><strong><em>Edit</em></strong></p>
  
  <p>Also can u tell me whats wrong with this.. </p>
  
  <pre><code>var ele=document.getElementById('show'); 
  document.getElementById('show').innerHTML = el.innerHTML; 
  ele.width='200px'; 
  ele.height='30px';  
  ele.bgcolor='#a9a9a9'; 
  ele.color='#fff'; 
  ele.position='absolute'; 
  ele.display='block'; 
  
  $(window).mouseover(function(event) { 
      $("#show").css({'top': event.pageY, 'left': event.pageX}); 
      $('#show').height(); 
  });
  </code></pre>
  
  <p>The div doesnt show up.This is inside a function and is invoked on mouse over</p>