Javascript height sums don't match

mr02077 · 01-15-2013, 11:13 PM

I have a div, absolutely positioned, originally non-visible that is shown at the position of an element icon (in elements listing) being clicked rendering its preview (top position of the preview is lined to the top of the icon clicked).

When the element being clicked is positioned low on the page, the preview is rendered somewhat below the original page border, and scrolling is necessary.
I want to move the preview upward to have its bottom edge on the previous page bottom limit. The problem is the code I use doesn't return what is expected for the page height (it is greater than the sum of the preview height and the clicked-element top position).

Here's the code: file 1:

Code:

jQuery('elementClicked').live('click',function(){
...
jQuery("previewDiv").setTopAtClickedElement(jQuery(this));
...
}

file 2:

Code:

jQuery.fn.setTopAtClickedElement = function (element) {
//original positioning    
this.css('top', element.offset().top + 'px');
 
// the troublesome part where the eventual correction should be done
if (element.offset().top + this.height() > jQuery(document).height())
{
    this.css('top', jQuery(document).height() - this.height() + 'px');
}
}

Similar happens when I use Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) for the measure of the document height as suggested on a link .

Here is the visual look of what I am trying to explain, and here's the jsfiddle.

Do you have any suggestions on how I should implement this troublesome part of the code?

Please tell if I wasn't clear enough.
Thank you very much for the time.

sunfighter · 01-16-2013, 05:37 PM

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>