Geek Answers Handbook

How can I get the correct div height property without displaying it on the page?

I am implementing a Wordpress theme where content moves vertically on a page. To do this, I need to measure the size of the div containing the content, without rendering it visible. I am trying to do all this without Ajax.

Here is what I have discovered so far:

I can easily load a document, read the size, and then hide the div using javascript. Unfortunately, there is a very obvious (and unacceptable) flicker because javascript does not hide the div quickly enough. There is also the problem that if the images are placed in the content, I need to wait until they are displayed in order to get the true size ... no bueno.

Another option is to hide the content using CSS, but if the user does not have javascript enabled, they will simply look at a blank page.

Which brings me to where I am.

I have a javascript part that starts right after the styles declaration, which changes the location of the stylesheet link element and then re-displays the page with a special javascript style sheet. This solves the problem of hiding content before reading the size.

This was accomplished by positioning the div containing the content absolutely and off the 9999pixels page.

#content { position: absolute; left: -9999px; }

At this point, I'm using jquery to get the height of the content using the following code:

 $('#content').height();

The problem is that the number that is returned is the wrong size and much smaller than the actual content. When I change css to:

 #content { position: absolute; left: 0px; }

It displays correctly. What gives?? Is there a mistake that I don’t know about? This happens in both Chrome and Firefox.

You can view it here http://thethechad.com/wordpress

- UPDATE -------------------------------------------- ---- --------------------------

I understood my problem. The div used did not have the specified width. When I moved it outside the flow of the document, it expanded to fill this gap, changing the content and reducing the height of the element. I went back to my CSS and hardcoded the width, and everything works fine. I feel very stupid. I’m sure we all have such moments. Thanks so much for helping the guys!

+4
source share
2 answers

I am a little confused by your long explanation, but here is how I measure things without seeing them.

I assign the class name to the div, which I call the "measure". The measure predetermined CSS:

 .measure { position: absolute; // doesn't affect layout visibility: hidden; // not visible, but normal size left: -1000px; // won't affect scrollbars top: -1000px; // won't affect scrollbars }

Then you can get the height of the divs. Note: the width may not be the same as in the page layout, because divs go to full width when the position is: static.

If you want to make sure that the object has never been seen, you can give it the initial “measure” class in it of the original definition, and then delete the class later when you want to use the object in page layout.

+4
source

I'm not sure what causes your problem, but you can use something like this: http://jsfiddle.net/Paulpro/9YBDB/

 <div id="thediv">This is the div</div> <script type="text/javascript"> var $thediv = $('#thediv'); var height = $thediv.height(); $thediv.hide(); $thediv.html('Div\ height is: '+height); $thediv.show(); </script>

Did you run a script to hide the div immediately after the div is rendered, and not in the script later in your code or in DOMReady, etc., so that the flicker does not work. However, if the user computer is slow or using an older browser, a flicker may appear, I'm not sure. It all depends on whether the HTML parser and the Javascript engine are enough for the browser to finish executing $thediv.hide(); before the div is processed, and I think that almost all browsers will be, because rendering is a relatively slow process.

+1
source

More articles:


All Articles