I need to grab the height of a div.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

I need to grab the height of a div.

 
0
  #1
Aug 11th, 2006
Is there a way using javascript to grab the height of a div.

The issues is that when I render my html page I have a div with a set size. It only takes up about half of the screen.
When the content in that div is too large, the div increase its height to fit those contents and a scrollbar appears on the HTML page.
I want to grab the actual height of the div when the page is done loading, and make modification based on the height via javascript.

I would like to add a vertical scrollbar in the div if the content exceeds a certain height, so that the scrollbar for the whole page is not needed. Is this possible?

Thanks, sj
Reply With Quote Quick reply to this message  
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: I need to grab the height of a div.

 
2
  #2
Aug 11th, 2006
This will set the height of your div to the height of the browser window:
NOTE: 'divID' is the id name of the div in the html document.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. window.onload = setDiv;
  3.  
  4. function setDiv() {
  5. var wh = getWindowHeight(); // Window Height
  6. var d = document.getElementById('divID') // Get div element
  7. var dh = d.offsetHeight // div height
  8. d.style.height = wh + 'px'; // Set div height to window height
  9. }
  10.  
  11.  
  12.  
  13.  
  14. function getWindowHeight() {
  15. var windowHeight = 0;
  16.  
  17. if (typeof(window.innerHeight) == 'number')
  18. windowHeight = window.innerHeight;
  19.  
  20. else {
  21.  
  22. if (document.documentElement && document.documentElement.clientHeight)
  23. windowHeight = document.documentElement.clientHeight;
  24.  
  25. else {
  26. if (document.body && document.body.clientHeight)
  27. windowHeight = document.body.clientHeight; }; };
  28.  
  29. return windowHeight;
  30. };
Last edited by FC Jamison; Aug 11th, 2006 at 3:34 pm.
Reply With Quote Quick reply to this message  
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

Re: I need to grab the height of a div.

 
0
  #3
Aug 11th, 2006
Thanks really good stuff.

The issues is that, I only need to set the div to the height of the window, if the content of the div requires the div too expand.

Right now the default height of my div is 30em. I want to keep it this size unless the content returned requires the div to expand vertically. If this is the case then I want to set the height of the div to the height of the window. Like you suggested.
Reply With Quote Quick reply to this message  
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: I need to grab the height of a div.

 
0
  #4
Aug 11th, 2006
Try changing the last line of the code to
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. d.style.minHeight = wh + 'px'; // Set minimum div height to window height

If that doesn't work, you'll have to use a conditional statement like

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. if (dh < wh)
  2. d.style.height = wh + 'px'; // Set div height to window height only if div height is less than window height;
Last edited by FC Jamison; Aug 11th, 2006 at 4:33 pm.
Reply With Quote Quick reply to this message  
Join Date: May 2006
Posts: 20
Reputation: ivanCeras is an unknown quantity at this point 
Solved Threads: 1
ivanCeras's Avatar
ivanCeras ivanCeras is offline Offline
Newbie Poster

Re: I need to grab the height of a div.

 
0
  #5
Aug 12th, 2006
Hi Deacon J,

Im pretty sure that you are an expert about div.....
how about my problem..?
with css <div> {overflow:scroll/auto} controls...
when the page is reloaded.. the default location of the
<div> overflow scroll bars is on the top... what shoul i do to
position the scroll button/bars at the bottom of the overflow..
please... i need help... thank you very much!!...
ivan_ceras at_yahoo_dot_com
Reply With Quote Quick reply to this message  
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: I need to grab the height of a div.

 
0
  #6
Aug 12th, 2006
I'm not understanding your problem.

Can you post your code so I can run it and see exactly what you mean?
Reply With Quote Quick reply to this message  
Join Date: Aug 2007
Posts: 2
Reputation: possitive is an unknown quantity at this point 
Solved Threads: 0
possitive's Avatar
possitive possitive is offline Offline
Newbie Poster

Re: I need to grab the height of a div.

 
0
  #7
Aug 23rd, 2007
I have one question.. Your code can get the height of div, which is not set as 'Display:none' by CSS styles.. I have a problem.. I need to get the size (height) of DIV object, which is normaly not displayed (means, that has style defintion is: display:none).. If I'll change the CSS to 'display:block' it works, but I have Implicit value of CSS styles for my DIV 'display:none'..

Do you have any solution?

Sorry about the english, I am from Slovakia

lubo
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 1
Reputation: u01jmg3 is an unknown quantity at this point 
Solved Threads: 0
u01jmg3 u01jmg3 is offline Offline
Newbie Poster

Re: I need to grab the height of a div.

 
0
  #8
Nov 21st, 2007
*Bump*

Just wondered how the solution written in posts #2 and #4 could be adapted to work when the window is resized (onResize) baring in mind IE7 has a bug where it goes into an infinite loop when this method is called? On top of this, does anyone know a solution to the question posted in the last post (#7)?

Thanks. Jonathan.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: I need to grab the height of a div.

 
0
  #9
Nov 23rd, 2007
Originally Posted by possitive View Post
I have one question.. Your code can get the height of div, which is not set as 'Display:none' by CSS styles.. I have a problem.. I need to get the size (height) of DIV object, which is normaly not displayed (means, that has style defintion is: display:none).. If I'll change the CSS to 'display:block' it works, but I have Implicit value of CSS styles for my DIV 'display:none'..

Do you have any solution?

Sorry about the english, I am from Slovakia

lubo
The height value you want does not exist until the div is actually rendered on the display.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC