Ever Needs To Find Out A Table Height Or With With JavaScript Well stop looking, here is the answer (CSS and JS)

[dragoneye1405241521 0]

Welcome everybody to this litle tutorial.

by v.DragonEyE.n09

 

Introduction:

 

Using javascript you can find the height and width of a table, cell, div, image, etc.. the more simple way is to ask for this...

 

 

<table id="myElement" border="0" cellpadding="0" cellspacing="0" style="height: 300px; width: 450px;">

????[/tab]<tr>

???????? <td>

???????????? <p>some fake text and images for the example</p>

???????????? <p>some fake text and images for the example</p>

???????????? <p>some fake text and images for the example</p>

???????????? <p>some fake text and images for the example</p>

???????????? <p>some fake text and images for the example</p>

???????? </td>

????</tr>

</table>

 

<script>

???? alert( document.getElementById("myElement").style.height ); // this will print 300px

???? alert( document.getElementById("myElement").style.width ); // this will print 450px

</script>

The only problem we have here is that both, the width and height needs to be specified in the table properties as style attributes. What happen if you want to find out the width or height of a element with out those values specified. Well it's very simple, you just need to modify a little your javascript.

 

<script>

???? alert( document.getElementById("myElement").clientHeight ); // this will print 300

[tab] alert( document.getElementById("myElement").clientWidth ); // this will print 450

</script>

 

The magic words in here are "clientHeight" and "clientWidth", those two work as magic, the only thing is that this only work in the most moderm version of Internet explorer and Netscape, I dont know if they work for mozilla fire fox.

 

You can use those attibutes on eny kinf of object, almost.

 

Well, thats all for now.

 

Later I can show you a way to implement this code to a dinamic page where you want to load content into an iframe and resize the iframe to match the content's height and wdith or just one of them.

 

Att.

v.DragonEyE.n09

Edited May 9, 2006 by dragoneye (see edit history)

[RationalRabbit 0]

the only thing is that this only work in the most moderm version of Internet explorer and Netscape, I dont know if they work for mozilla fire fox.

I stated earlier:

"You must mean IE6. I haven't tested in that version, but it does not work in IE7 (returns 0). However, works fine in FireFox 2.0".

 

The reason I was experiencing this problem was that (and I'm no expert here, so pardon the simple explanation) IE and FireFox process tables (and probably other elements) differently. I believe that FireFox proceses as it receives the information, while IE retrieves all the information before processing the element. Pardon the poor explanation.

 

What I was trying to do is to have one column adjust its' content (pulled from a database) according to the amount of content in the adjoining column. Setting an alert at the top of the 2nd column showed that, in FireFox, the 1st column was displayed before the alert appeared. In IE7, the alert appeared before any of the table was displayed. I could not get a height and width number in IE7 unless I moved the JavaScript outside of the table, which, of course, was nouse to me.

 

Thanks for the code, though. I'm sure it will be handy elsewhere.

Edited May 11, 2007 by RationalRabbit (see edit history)

[iGuest 3]

Problem in finding the height of a

in a web page

Ever Needs To Find Out A Table Height Or With With JavaScript

 

Hi Friends ,

I am developing a project where I need to find the largest table in a web page layout and display only the largest table in terms of height and width.Since height is not usually displayed and I have heard of OffsetLeft and OffsetTop to find the largest table in terms of display, java gurus Please help me out.

 

-reply by Raju