Solved

Need help with getting height of a div...

Posted on 2010-11-24
5
683 Views
Last Modified: 2013-11-11
Hi,

I'm trying to programmatically / dynamically get the height of a div (containing data that dynamically increases the height of the div) in pixels using javascript. Based the javascript code below, the alert always shows a div height of 0. But if I specifically set a fixed height for the div (for example,  <div id="sidebar" style="height:150px;width:500px;border:1px solid #ccc;padding:10px;">), then the alert shows the correct fixed height of the div, which is 150. How do I get the dynamic height in pixels?

    <div id="sidebar" style="width:500px;border:1px solid #ccc;padding:10px;">
        <div id="leftNav">
            <div id="product">
                        Products
                  </div>            
            <div id="productList">
                <ul>
                              <li>Product 1</li>
                              <li>Product 2</li>
                              <li>Product 3</li>
                </ul>
            </div>            
            <div id="service">
                        Services
                  </div>
            <div id="serviceList">
                <ul>
                              <li>Service 1</li>
                              <li>Service 2</li>
                              <li>Service 3</li>
                </ul>
            </div>
        </div>                                  
   </div>
<script type="text/javascript">
      var h = document.getElementById('sidebar').style.pixelHeight;
      alert('div height = ' + h);
</script>

Many thanks in advance.
0
Comment
Question by:WebAppDeveloper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 2

Expert Comment

by:Atr3ides
ID: 34208602
Try this
var h = document.getElementById('sidebar').offsetHeight;
alert('div height = ' + h);
0
 

Author Comment

by:WebAppDeveloper
ID: 34208627
Atr3ides,

document.getElementById('sidebar').offsetHeight; does NOT work neither.  The alert says "div height = undefined"
0
 

Author Comment

by:WebAppDeveloper
ID: 34208637
I've  tried all these, but they don't work:

var h = document.getElementById('sidebar').height;
var h = document.getElementById('sidebar').pixelHeight;
var h = document.getElementById('sidebar').clientHeight;
var h = document.getElementById('sidebar').offsetHeight;

0
 
LVL 2

Accepted Solution

by:
Atr3ides earned 500 total points
ID: 34208697
Here's the result of using those, with your HTML, in FF and Chrome, with Firebug/Dev tools active

 
<div id="sidebar" style="border:1px solid #ccc;padding:10px;">
        <div id="leftNav">
            <div id="product">
                        Products
                  </div>            
            <div id="productList">
                <ul>
                              <li>Product 1</li>
                              <li>Product 2</li>
                              <li>Product 3</li>
                </ul>
            </div>            
            <div id="service">
                        Services
                  </div>
            <div id="serviceList">
                <ul>
                              <li>Service 1</li>
                              <li>Service 2</li>
                              <li>Service 3</li>
                </ul>
            </div>
        </div>                                  
   </div>
<script type="text/javascript">
    var h = document.getElementById('sidebar').height;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').pixelHeight;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').clientHeight;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').offsetHeight;
    console.log('div height = ' + h);
</script>

Open in new window


Firefox:
div height = undefined
div height = undefined
div height = 244
div height = 246

Open in new window


Chrome:
div height = undefined
test.html:29div height = undefined
test.html:31div height = 244
test.html:33div height = 246

Open in new window

0
 

Author Comment

by:WebAppDeveloper
ID: 34208782
Suddenly, the following are now working for me.

var h = document.getElementById('sidebar').clientHeight;
var h = document.getElementById('sidebar').offsetHeight;

Thanks.
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question