You do not want to have your low PREVIEW's bottom edge on the previous page bottom limit. If user looks at element 1 and the bottom element The popup will look stupid. The following code puts the bottom of the popup on the bottom of the page. This works out OK until we use more viewing elements and extend the page.
To see this simple use enough anchors to fill a page; things will work good. Than add a couple and see the difference. What I would do and didn't (because I thought it would complicate the coding too much) Is to force the hidden elements to show. I used document.getElementById("previewPopup").innerHTML = "To Low To Show";
to prove I was manipulating the correct popups. Just take both of those out to use this.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<script type='text/javascript' src='javascript/jquery.js'></script> //Mine; USE YOURS HERE
<script type="text/javascript">
$(document).ready(function(){
jQuery.fn.setTopAtClickedElement = function (element) {
if (element.offset().top + this.height() > jQuery(document).height())
{
this.css('top', jQuery(document).height() - this.height() + 'px');
document.getElementById("previewPopup").innerHTML = "To Low To Show";
}else{
this.css('top', element.offset().top + 'px');
document.getElementById("previewPopup").innerHTML = "PREVIEW";
}
};
jQuery('a.elementClicked').live('click',function(){
jQuery("#previewPopup").setTopAtClickedElement(jQuery(this));
jQuery('#previewPopup').css('display', 'block');
});
});
</script>
<style type="text/css">
#previewPopup {display: none; height: 200px; width: 100px; left: 100px; position: absolute ; background-color: red;}
#elementsTable tr { height: 50px; }
</style>
</head>
<body>
<div id="previewPopup">PREVIEW</div>
<table id="elementsTable">
<tr><td><a href="#" class="elementClicked">element 1</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 2</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 3</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 4</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 5</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 6</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 7</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 8</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 9</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 10</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 11</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 12</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 13</a></td></tr>
<tr><td><a href="#" class="elementClicked">element 14</a></td></tr>
</table>
</body>
</html>