jQuery positioning a div with offset under the clicked element on the long document
<blockquote>
  <p>Using jquery I need to open a div box under a specific element I click on.  I grab
  the <em>offset</em> of the clicked element and apply top and left and apply for
  the div. On the short pages it works fine, but when I try to do it on
  the long pages, specially after I scroll down it opens all over the
  page.  Usually on the first click it opens somewhere else and on the
  second in the right place. It's so unreliable. </p>
</blockquote>

<pre>What is the best way to handle it.</pre>

<pre><code>#div_box {  
    position: absolute;  
    visibility: visible;  
    width: 500px;  
    height: 260px;  
    z-index: 200;    
    background: #FFFFFF;  
    border: 2px solid #000000;  
}


.target_element {  
    display: inline-block;  
    position: relative;  
    float: right;  
}  




$('.target_element').live("click",function(event) {  
    var curoffset = $(this).offset();  
    var eltop = curoffset.top;  
    var elleft = curoffset.left;  
    var boxtoppos = eltop + $(this).height();  
    //just to see where I cliked  
    if (event.pageX) { pageX = event.pageX; pageY = event.pageY;  }  
    else {   
        pageX = event.clientX + document.body.scrollLeft;   
        pageY = event.clientY + document.body.scrollTop;   
    }
    var mess = 'eltop = ' + eltop + '; ' +  
               'elleft = ' + elleft + '; ' +  
               'boxtoppos = ' + boxtoppos + '; ' +  
               'pageY = ' + pageY + '; ' +  
               'pageX = ' + pageX + '; ';  

    //reposition the box
    $('#div_box').offset({ top: boxtoppos, left: elleft}).show();

    //snap the box new offset  
    curoffset = $('#notewrap').offset();
    mess += 'actual top = ' + curoffset.top + '; ' + 'actual left = ' + curoffset.left;  
    $('#notecontent').html(mess);  
}); 

$('#notecontent').live("click",function(event) {  
    $(this).hide();    
}); 
</code></pre>

<blockquote>
  <p>The box opens all over and show the results:</p>
  
  <h2>Wrong position:</h2>
  
  <p>eltop = 256 elleft = 352 boxtoppos = 272 pageY = 870 pageX = 360 actual top = -336 actual left = 352</p>
  
  <h2>This is a good one</h2>
  
  <p>eltop = 440 elleft = 352 boxtoppos = 456 pageY = 873 pageX = 355 actual top = 456 actual left = 352</p>
  
  <h2>wrong position:</h2>
  
  <p>eltop = 406 elleft = 352 boxtoppos = 422 pageY = 1178 pageX = 362 actual top = 846 actual left = 706</p>
</blockquote>
