While working on a web design recently, I realized that I needed to be able to dynamically retrieve the height of a div. My initial design involved some JavaScript, and actually stored the div in its entirety as a JavaScript variable. When I hovered over a certain page element, I would dynamically replace the contents of another page element with that div using the innerHTML property.
What I very quickly discovered is that there was no way for me to dynamically retrieve the height (or width) of the div because it didn't actually exist as a page element when the page was initially rendered. My first attempt at a solution to the problem was to no longer store the div in a JavaScript variable and instead make it a hidden element in the actual rendered page. To do so, I relied on relative positioning and the style display: none to keep the div out of view.
What I found was that, for whatever reason, once I had converted the div to an actual page element, I was still unable to retrieve its height dynamically, once the page had been fully rendered. When I attempted to report the element's height using JavaScript's alert() function, the height was always returned as 0. In a sense, it made sense because the element really didn't have a height yet, at least as far as its visual display on the page was concerned. Being the web designer, though, I knew the div was there, and just hidden, so I still expected there to be a height associated with it.
Some Google searching eventually led me to a post at WebDeveloper.com that said the following:
You can measure an element whose style visibility is hidden, if the display is not set to none.
You can make it act like display=none by giving it an absolute position while it is hidden, and remove the position property when you make it visible.
A little tinkering with my design and JavaScript proved the post insightful. Instead of relying on relative positioning initially, I changed the div to be absolutely positioned on the page. I converted the display styling to the block style and set visibility to "hidden." By doing so, the div was actually rendered with a real height (and width) and I could access it via JavaScript calls as I had originally hoped. As covered in the aforementioned forum post, the other trick was that I needed to remove the absolute positioning on the div when it came time to actually display it on the page, so that just came down to setting the position property to "relative" at the same time I set the visibility property to "visible."
In doing so, I had essentially the same page behavior from the end user's perspective, but was able to dynamically access the height of the div without any trouble. Hopefully next time around, I'll remember this trick so I don't end up having to refactor my HTML and JavaScript to support it.
Comments
You're right indeed. Elements having "display: none" do not do not occupy any space until they're "display: block"ed. However, elements with "visibility: hidden" DO occupy space. You can try a combination of visibility, z-index and relative positioning to move the element out of the document flow while still having that element to maintain a layout.
You are my new god :)
I love you.
Fantastic post - just what I was looking for.
Although I ended up hiding my divs by setting "height:0" and "overflow:hidden" and then displaying them by setting "height:auto". That works quite nicely
Hey,
I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Thank you
:-)
Keep blogging
Excellent article! Totally helped me out! Thank you!
great post. thank you.
Thanks a lot!!! I saw that post earlier but didn't really pay attention to it. Glad you made an article about it.
Perfect post! Help me a lot!
tks
Post Comments
If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.
Excellent blog post. I was having the exact same problem and was looking for a solution to it. I almost starting tearing my hair out of frustration. Thanks for sharing your experience, saved me a hell of alot of time.
Cheerio..
Permalink