Topic awaiting preservation: How to measure the height from a div? $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8929" title="Pages that link to Topic awaiting preservation: How to measure the height from a div?" rel="nofollow" >Topic awaiting preservation: How to measure the height from a div?\$

Author	Thread
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 10-29-2003 22:30 No i don't mean the old "stick your ruler against your screen" method. Picture this, there is a div on my page with some text in it. The height from the div depends on the text in it. The div has a fixed amount of pixels to either side so it. Thus when the screen or browser-window size is smaller the div will be smaller too. And thus the div will be longer on a small screen. Now i want to know is there a way i can measure the div and put it's height in a variable so a can do some scripting from there. I tried it with the very simple: code: <script language="JavaScript" type="text/javascript"> function getHeight(divId){ divheight=document.getElementById(divId).height; alert("Div height is: "+ divheight);} </script> and to show what's going on code: <body onLoad="getHeight('biopaul')"> <div id=biopaul>bla bla</div> But this gives me height as it was declared and since i did not declare anything it gives me an undefined. If anyone has a suggestion or knows where to look it would be very apreciated. __________________________________________ "Art has to be forgotten. Beauty must be realized." Piet Mondriaan [This message has been edited by Rinswind 2th (edited 10-29-2003).]
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 10-29-2003 23:24 After a real good search i found one working solution. Changing "getElementById(divId).height;" to "getElementById(divId).offsetHeight;" works in IE5 Moz1.4 and Opera7.01 however these browsers returned very different results. Due to the different results i guess they don't handle the offsetHeight in the same way.. <edit>This should be an edit to my last post but i pressed the wrong button....</edit> __________________________________________ "Art has to be forgotten. Beauty must be realized." Piet Mondriaan [This message has been edited by Rinswind 2th (edited 10-29-2003).]
Dracusis Maniac (V) Inmate From: Brisbane, Australia Insane since: Apr 2001	posted 10-30-2003 18:22 Yup, you can't read the obj.height if it aint been set through script. That's what the obj.offsetHeight is used for (returns integer value of height in pixels). You can also use offsetWidth, offsetTop and offsetLeft to get the position/size of any element on the page. You probably got different results because the height of the DIV isn't fixed. Check the results you get by screen capping the page in each browser and meauering it in photoshop, they should be correct, it's probably just that the different browsers display that div differently.
Yossi Admon Bipolar (III) Inmate From: Israel Insane since: Nov 2001	posted 10-30-2003 21:15 Hi, I've suceeded to do so in IE by adding the whole Div content into a table with one TD and than I've used the clientWidth and clientHeight of a inner table.
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 10-31-2003 18:52 So what you are measuring is the inside from the td Not the outside from the div. But i guess it works pretty well ? __________________________________________ "Art has to be forgotten. Beauty must be realized." Piet Mondriaan
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 10-31-2003 23:27 I was recently messing around with this, you can also use a few methods to determine the "rendered" style of an element (ie. that which it inherits from CSS etc., whatever affects its properties). IE and Mozilla use different methods because MS decided to go their own way, as usual.. code: // Assuming someDiv = document.getElementById('divElementOfSomeSort'); .. // IE method: currentStyle someDiv.currentStyle.backgroundImage; // Mozilla method: getComputedStyle document.defaultView.getComputedStyle(someDiv,'').getPropertyValue('background-image'); // or document.defaultView.getComputedStyle(someDiv,'').backgroundImage; I'm not sure what browsers support the Mozilla method, but it seems to work fine in recent versions. There may be some logical reason for it, but I don't understand why the normal "style" object accessed via JS does not reflect the current properties of an element as it is rendered; that would make the most sense to me. Instead you have to use currentStyle or getComputedStyle, which seems kind of odd. Anyone know? [This message has been edited by Scott (edited 10-31-2003).]
Dracusis Maniac (V) Inmate From: Brisbane, Australia Insane since: Apr 2001	posted 11-01-2003 03:08 Interesting, I've never played with that kinda stuff before scott, thanks for sharing that, most helpfull. Is the moz method supported for other browsers like Opera or Kon-browsers ? Although, for all intent pourposes, the myElement.offsetXXXXXXX has worked well enough for getting element sizes or position, espically with non absolutly positioned elements. Yossi: That seems like a very backwards way to do things, what advantage would that have over using document.getElementById("x").offsetHeight ? if you wanted the inner height just minus the top and bottom padding, margins and borders.
Nevel Bipolar (III) Inmate From: Amsterdam Insane since: Jun 2002	posted 11-03-2003 14:01 I've been digging in my HTML past, and I found a likewise script: <script type="text/javascript"> function resizeWin(){ var contentDiv = document.getElementById('contentLyr'); var cW = contentDiv.offsetWidth; var cH = contentDiv.offsetHeight; window.resizeTo(cW, (cH+50)); var newW = (screen.width/2) - (cW/2); var newH = (screen.height/2) - (cH/2); window.moveTo(newW, newH); } </script> with the following body-tag: <body onload="resizeWin()"> and containing the followin DIV: <div id="contentLyr"> <img src="test.gif"> <hr> </div> I used this to get the dimensions of the div after the image had been loaded, and then position the window in the center of the screen, since it was a popup. Now notice how the offsetWidth refuses to work here in NS5+ and Opera6+. Now this shouldn't bother you, since you're just after the offsetHeight, which works fine. [This message has been edited by Nevel (edited 11-03-2003).]
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 11-03-2003 18:58 MMm this is intresting stuff. __________________________________________ "Art has to be forgotten. Beauty must be realized." Piet Mondriaan
Nevel Bipolar (III) Inmate From: Amsterdam Insane since: Jun 2002	posted 11-05-2003 13:36 Yes it is, JS verbaast je elke weer
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 11-06-2003 22:41 heheh.... __________________________________________ "Art has to be forgotten. Beauty must be realized." Piet Mondriaan

Topic awaiting preservation: How to measure the height from a div?\$

Author

Thread

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 10-29-2003 22:30

No i don't mean the old "stick your ruler against your screen" method.

Picture this, there is a div on my page with some text in it. The height from the div depends on the text in it. The div has a fixed amount of pixels to either side so it. Thus when the screen or browser-window size is smaller the div will be smaller too. And thus the div will be longer on a small screen. Now i want to know is there a way i can measure the div and put it's height in a variable so a can do some scripting from there.

I tried it with the very simple:

code:

<script language="JavaScript" type="text/javascript">

function getHeight(divId){

divheight=document.getElementById(divId).height;

alert("Div height is: "+ divheight);}

</script>

and to show what's going on

code:

<body onLoad="getHeight('biopaul')">

<div id=biopaul>bla bla</div>

But this gives me height as it was declared and since i did not declare anything it gives me an undefined.
If anyone has a suggestion or knows where to look it would be very apreciated.

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

[This message has been edited by Rinswind 2th (edited 10-29-2003).]

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 10-29-2003 23:24

After a real good search i found one working solution. Changing "getElementById(divId).height;" to "getElementById(divId).offsetHeight;" works in IE5 Moz1.4 and Opera7.01 however these browsers returned very different results. Due to the different results i guess they don't handle the offsetHeight in the same way..

<edit>This should be an edit to my last post but i pressed the wrong button....</edit>
__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

[This message has been edited by Rinswind 2th (edited 10-29-2003).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted 10-30-2003 18:22

Yup, you can't read the obj.height if it aint been set through script.

That's what the obj.offsetHeight is used for (returns integer value of height in pixels). You can also use offsetWidth, offsetTop and offsetLeft to get the position/size of any element on the page. You probably got different results because the height of the DIV isn't fixed. Check the results you get by screen capping the page in each browser and meauering it in photoshop, they should be correct, it's probably just that the different browsers display that div differently.

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

posted 10-30-2003 21:15

Hi,
I've suceeded to do so in IE by adding the whole Div content into a table with one TD and than I've used the clientWidth and clientHeight of a inner table.

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 10-31-2003 18:52

So what you are measuring is the inside from the td Not the outside from the div.
But i guess it works pretty well ?

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 10-31-2003 23:27

I was recently messing around with this, you can also use a few methods to determine the "rendered" style of an element (ie. that which it inherits from CSS etc., whatever affects its properties).

IE and Mozilla use different methods because MS decided to go their own way, as usual..

code:

// Assuming someDiv = document.getElementById('divElementOfSomeSort'); ..





// IE method: currentStyle

someDiv.currentStyle.backgroundImage;





// Mozilla method: getComputedStyle

document.defaultView.getComputedStyle(someDiv,'').getPropertyValue('background-image');



// or 

document.defaultView.getComputedStyle(someDiv,'').backgroundImage;

I'm not sure what browsers support the Mozilla method, but it seems to work fine in recent versions.

There may be some logical reason for it, but I don't understand why the normal "style" object accessed via JS does not reflect the current properties of an element as it is rendered; that would make the most sense to me. Instead you have to use currentStyle or getComputedStyle, which seems kind of odd. Anyone know?

[This message has been edited by Scott (edited 10-31-2003).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted 11-01-2003 03:08

Interesting, I've never played with that kinda stuff before scott, thanks for sharing that, most helpfull. Is the moz method supported for other browsers like Opera or Kon-browsers ?

Although, for all intent pourposes, the myElement.offsetXXXXXXX has worked well enough for getting element sizes or position, espically with non absolutly positioned elements.

Yossi: That seems like a very backwards way to do things, what advantage would that have over using document.getElementById("x").offsetHeight ? if you wanted the inner height just minus the top and bottom padding, margins and borders.

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

posted 11-03-2003 14:01

I've been digging in my HTML past, and I found a likewise script:

<script type="text/javascript">
function resizeWin(){
var contentDiv = document.getElementById('contentLyr');
var cW = contentDiv.offsetWidth;
var cH = contentDiv.offsetHeight;

window.resizeTo(cW, (cH+50));
var newW = (screen.width/2) - (cW/2);
var newH = (screen.height/2) - (cH/2);
window.moveTo(newW, newH);
}
</script>

with the following body-tag:
<body onload="resizeWin()">

and containing the followin DIV:
<div id="contentLyr">
<img src="test.gif">
<hr>
</div>

I used this to get the dimensions of the div after the image had been loaded, and then position the window in the center of the screen, since it was a popup.
Now notice how the offsetWidth refuses to work here in NS5+ and Opera6+. Now this shouldn't bother you, since you're just after the offsetHeight, which works fine.

[This message has been edited by Nevel (edited 11-03-2003).]

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 11-03-2003 18:58

MMm this is intresting stuff.

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

posted 11-05-2003 13:36

Yes it is,

JS verbaast je elke weer

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 11-06-2003 22:41

heheh....

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan