Javascript height sums don't match

[mr0277]

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:

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

file 2:

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.

[gon1387]

Hi mr0277,

If the problem was going beyond the table's bound, here's the code I edited: edited code

jQuery.fn.setTopAtClickedElement = function (element) {

    if (element.offset().top + this.height() > jQuery(document).height())
    {
      this.css('top', jQuery(document).height() - this.height() + 'px');
    } else {
      this.css('top', element.offset().top + 'px');
    }
};

You were always setting the top of the element based from it's parent's top or the current element's offsetTop. So the problem was, the moment you set the top of the lower elements, subsequently, the height of it's parent change. When you check if (element.offset().top + this.height() > jQuery(document).height()) the antecedent of your "if", the jQuery(document).height() and element.offset().top + this.height() have already been equal. To better explain this, please access this JS Fiddle Example and open your console.

[mr0277]

gon1387, the answer helped me very much, but what still confuses me is why the parent element grows in size when the jumping div is absolutely positioned, hence it is removed from the normal flow?
Also I'm not sure why the whole story goes aroung parent elements, and from debugger I see it does, when jQuery offset() should give position relative to document and not the parent element, which position() is supposed to do (api)

[gon1387]

I think I was the one confused. LOL. I was thinking of offsetParent back then. Anyhow, the parent I was pertaining was the document itself. And yes, jQuery offset values get its position from the document.
The one growing in size was the document itself, and would overflow.

Please let me know if that clear things up.

[mr0277]

Yup, it does.
I am not sure only about why the parent's height grows after the popup window shows up, when it is absolutely positioned and hence taken out of the normal flow? It would probably help me to cope with some issues I encountered after applying your solution to my application.
Thank you again.

[gon1387]

It's like this. Hope this explains it.

No PopUp Element State
----------------------------------
| document/the HTML itself       |
| ------------------------------ |
| |body                        | |
| |                            | |
| | --------                   | |
| | |a#1   |                   | |
| | --------                   | |
| |                            | |
| | --------                   | |
| | |a.2   |                   | |
| | --------                   | |
| ------------------------------ |
----------------------------------

With PopUp Element State(when a#1 was clicked)
----------------------------------
| document/the HTML itself       |
| ------------------------------ |
| |body                        | |
| |                            | |
| | --------  ---------------- | |
| | |a#1   |  |#PopUpElement | | |
| | --------  |              | | |
| |           |              | | |
| | --------  |              | | |
| | |a.2   |  ---------------- | |
| | --------                   | |
| ------------------------------ |
----------------------------------

With PopUp Element State(when a#2 was clicked)
----------------------------------
| document/the HTML itself       |
| ------------------------------ |
| |body                        | |
| |                            | |
| | --------                   | |
| | |a#1   |                   | |
| | --------                   | |
| |                            | |
| | --------  ---------------- | |
| | |a#2   |  |#PopUpElement | | |
| | --------  |              | | |
| ------------|              |-- |
|             |              |   |
|             ----------------   |
----------------------------------