0

I have a div, absolutely positioned, originally non-visible that is shown at the position of an element being clicked rendering its preview (top position of the preview is lined to the top of the element clicked). When the element being clicked is positioned low, the preview is render 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

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,

Community
  • 1
  • 1
Срба
  • 463
  • 3
  • 17
  • I dont really understand what you are trying to do. Do you have a visual example? or can you reproduce the problem in a jsfiddle? – Chanckjh Jan 04 '13 at 22:20
  • Here is the situation (http://postimage.org/image/9k6cox9qh/) I want to avoid - after a click on the Preview button below "Reseller Quote with Terms" label. I want to have the div positioned higher, in order not to cross the page bottom edge – Срба Jan 04 '13 at 22:34

1 Answers1

0

Instead of .height() Try using jQuery's outer.height() - api docs, which will take into account any padding (and optionally marign) you have on the page.

A jsfiddle or codepen will help us all out in solving your problem.

Nick Tomlin
  • 28,402
  • 11
  • 61
  • 90
  • Here's the fiddle: http://jsfiddle.net/J5uDg/5/ . Try to click on number 14 and you'll get the document extended to show the preview. I don't want that - I want the preview to move upward when it is to be rendered below the previous page border (its bottom edge lined with "element 14" label). Bottom edges of the other elements positioned too low so the preview overflows, should be lined with "element 14" label too. Thanks – Срба Jan 05 '13 at 11:42
  • I have tried also with outerHeight but I get "TypeError: Cannot read property 'defaultView' of null" message for jQuery(document).outerHeight(true) in the Javascript console . If I understood properly it means outerHeight is not applicable for the object – Срба Jan 05 '13 at 21:42
  • Nick hi. Did you have time to check the jsfiddle? Some advice would be much appreciated here. – Срба Jan 07 '13 at 20:52