 Ever Needs To Find Out A Table Height Or With With JavaScript, Well stop looking, here is the answer (CSS and JS) |
|
|
|
|
  |
 May 9 2006, 08:45 PM
Post
#1
|
|
|
Newbie [ Level 1 ]  Group: Members Posts: 2 Joined: 8-May 06 Member No.: 13,292  |
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... QUOTE <table id="myElement" border="0" cellpadding="0" cellspacing="0" style="height: 300px; width: 450px;"> [/tab]<tr> [tab] [/tab] <td> [tab] [/tab][tab] <p>some fake text and images for the example</p> [/tab][tab] <p>some fake text and images for the example</p> [/tab][tab] <p>some fake text and images for the example</p> [/tab][tab] <p>some fake text and images for the example</p> [/tab][tab] <p>some fake text and images for the example</p> [/tab][tab] </td> [/tab]</tr> </table> <script> [tab] alert( document.getElementById("myElement").style.height ); // this will print 300px [/tab] 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. QUOTE <script> [tab] alert( document.getElementById("myElement").clientHeight ); // this will print 300 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 This post has been edited by dragoneye: May 9 2006, 08:49 PM |
 |
 
|
|
May 11 2007, 12:01 AM
Post
#2
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 1 Joined: 10-May 07 Member No.: 21,888 |
QUOTE(dragoneye @ May 9 2006, 01:45 PM)  [size=2][b]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. This post has been edited by RationalRabbit: May 11 2007, 01:50 AM |
|
|
|
