1

I need to find out height of a page including the content that goes beyond the vertical scrolls which is hidden. I have searched google and stackoverflow QA's but those solution don't apply to my situation.

One condition is I cannot change HTML or BODY css. Basically I am trying this out for a firefox extension

All the methods like 

offsetHeight, scrollHeight, getComputedValue

didn't work somehow on a website noupe.com. Everytime I tried finding the body's above mentioned property it just gave me 18px even though the page height is more than 4000 px.

Tried jQuery's 

$(document).height();

Didn't work too.

This is how I am finding out page height:

var x = window.content;
var pageBody = x.document.getElementsByTagName("body")[0];    
var my_pageheight = parseInt(x.document.defaultView.getComputedStyle(pageBody, "").getPropertyValue("height"));

This gives me 18px on noupe.com but WORKS WELL on other websites. Any clue how i can make this work.

Thanks

offhell
  • 71
  • 1
  • 5
  • Did you find [how to get body height using Jquery?](http://stackoverflow.com/questions/806402/how-to-get-body-height-using-jquery)? – jensgram Sep 17 '10 at 10:24
  • Yes checked that out. I cannot set "HTML or BODY css" as I need to get this work inside a firefox addon. – offhell Sep 17 '10 at 10:28

1 Answers1

3

How about

$('body').height();

I was going to post an explanation, but Alex in the comments below did it for me, so instead I suppose I'll just post some links to places where you can find more information on this:

http://dev.opera.com/articles/view/35-floats-and-clearing/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Also remember that since we're dealing with the body element we can't use the overflow: hidden method (which would remove the scrollbars from the page).

Also, thank goodness you can inject in new elements, I was thinking of using this as a solution...

var max = 0;

$('body *').each(function(){
    var current = $(this);
    if ((current.offset().top + current.height()) > max) max = current.offset().top + current.height();
});

Probably counts as one of the worst pieces of Javascript I've ever written, since you stated that you can't add anymore CSS or HTML. The following, (assuming you still need it) should work: 

$('<div />').css({
    'height': 0,
    'width': 0,
    'visibility': 'hidden',
    'clear': 'both'
}).appendTo('body');

$('body').height();
Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • it just gives me 18px. :( even I have a script that finds out the height but it just fails on noupe.com – offhell Sep 17 '10 at 10:24
  • 2
    @offhell the reason why it fails there is because of floats. If you view it in Firebug you can see that the `body` **is** 18px high. To "fix" this, you'd need to clear the float somehow, and the easiest method is to inject a clearfix element after the last element, but that's out of the question here – Yi Jiang Sep 17 '10 at 10:34
  • Hey Yi Jiang, that was a great answer. Superb. But could you explain why the float caused that issue. I have been into CSS & HTML for long but never knew of such thing. Please i need to know this. WHY. – offhell Sep 17 '10 at 10:38
  • Well your solution definately works in my situation as I am building a firefox addon and I am very much allowed to insert elements. – offhell Sep 17 '10 at 10:48
  • Floats technically remove an element from the natural 'flow' of the document. When you float two elements side by side they 'break' out of their container, which means the container does not 'container them and will therefore have a height of whatever else is in there (padding, other elements etc). Clearing your floats after the container allows the container element to 'contain' it's floated elements properly http://webdesign.about.com/od/advancedcss/a/aa010107.htm – Alex Sep 17 '10 at 11:00