/    Sign up×
Community /Pin to ProfileBookmark

how to retrieve elements height

Copy linkTweet thisAlerts:
Mar 09.2004

hi,
i need to retrieve the height of a elements in my document.

Currently i wrote a javascript at end of document that cicle onto elements by a particular name and check its max height.
But i cannot find a property that tell me what is the height of element!!!

[code]
function getMaxX() {
var allTabs = new Array(“tab1”, “tab2”, “tab3”);
var maxH = 0;
for (i = 0; i < allTabs.length; i++) {
var wichTab = allTabs[i];
obj = document.getElementById(wichTab);
var tempH = obj.style.height;
if (tempH > maxH) {
maxH = tempH;
}
}
alert(maxH);
}
[/code]

some suggestions?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JayDieMar 09.2004 — WHAT element do you want to get the height of? DIV or what?

JayDie
Copy linkTweet thisAlerts:
@cigno5e5authorMar 09.2004 — now i'm tring with a div...
Copy linkTweet thisAlerts:
@Khalid_AliMar 09.2004 — use

object.offsetHeight or

object.offsetWidth

in NS6+ though,you will have to explicitly set the height and then retrieve it.
Copy linkTweet thisAlerts:
@cigno5e5authorMar 09.2004 — [i]Originally posted by Khalid Ali [/i]

[B]use



object.offsetHeight or

object.offsetWidth



in NS6+ though,you will have to explicitly set the height and then retrieve it. [/B][/QUOTE]

damn! it works fine in ie...but i need to run this code also on mozilla...

i explain my need:

I've a tabbed control pane (this control pane contains my search parameters), did with some div tags that groups many fields (search params). With a little javascript i show and hide them maintaing only one per time viewable.

But under my tabbed pane there is the search result, and the subpanes has different height everytime.

I need to correctly move search result under my search parameters...with no fixed height!!

can you help me? i've no more ideas!

thanks anyway...
Copy linkTweet thisAlerts:
@cigno5e5authorMar 09.2004 — another question...the property offsetHeight has only getter (mozilla says)...how to set?
Copy linkTweet thisAlerts:
@cigno5e5authorMar 09.2004 — did. mybe useful to everybody

(note: it's very very bad wirtten!)

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;style&gt;
.tabMenu {
font.family:monospaced;
cursor:hand;
cursor:pointer;
border: 1px solid black;
border-bottom: none;
padding: 3px;
}
.tab {
position:absolute;
border:1px solid black;
padding: 3px;
}
&lt;/style&gt;
&lt;script language="JavaScript"&gt;
allTabs = new Array("tab1", "tab2", "tab3");
function switchTab(tab) {
var tabs = document.getElementById('tabs');
var top = tabs.style.top;
var left = tabs.style.left;
for (i = 0; i &lt; allTabs.length; i++) {
var wichTab = allTabs[i];

<i> </i> if (tab == i) {
<i> </i> obj = document.getElementById(wichTab);
<i> </i> obj.style.visibility = 'visible';
<i> </i> obj.style.top = top;
<i> </i> obj.style.left = left;
<i> </i> } else {
<i> </i> document.getElementById(wichTab).style.visibility = 'hidden';
<i> </i> }
<i> </i> }
<i> </i>}

<i> </i>function getMaxH() {
<i> </i> var maxH = 0;
<i> </i> for (i = 0; i &lt; allTabs.length; i++) {
<i> </i> var wichTab = allTabs[i];
<i> </i> obj = document.getElementById(wichTab);
<i> </i> var tempH = obj.offsetHeight;
<i> </i> if (tempH &gt; maxH) {
<i> </i> maxH = tempH;
<i> </i> }
<i> </i> }
<i> </i> return maxH;
<i> </i>}

<i> </i>&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;


&lt;form name="myForm" action="#" method="post"&gt;

&lt;div id="tabs" style="margin-bottom:50px;"&gt;
&lt;span class="tabMenu" onclick="switchTab(0);"&gt;Tab 1&lt;/span&gt;
&lt;span class="tabMenu" onclick="switchTab(1);"&gt;Tab 2&lt;/span&gt;
&lt;span class="tabMenu" onclick="switchTab(2);"&gt;Tab 3&lt;/span&gt;&lt;br&gt;

<i> </i>&lt;div id="tab1" class="tab" style="visibility:visible;"&gt;
<i> </i> dipertimenti &lt;input type="Text" name="field1"&gt;&lt;br&gt;
<i> </i> analogico &lt;input type="Text" name="field2"&gt;&lt;br&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;div id="tab2" class="tab" style="visibility:hidden;"&gt;
<i> </i> digitale &lt;input type="Text" name="field4"&gt;&lt;br&gt;
<i> </i> indubbiamente &lt;input type="Checkbox" name="sel" checked&gt;
<i> </i>&lt;/div&gt;

<i> </i>&lt;div id="tab3" class="tab" style="visibility:hidden;"&gt;
<i> </i> Objectives for this CSS Module
&lt;br&gt;
After completing this module, you should be able to:
&lt;br&gt;
* demonstrate how Cascading Style Sheets can be used to enhance a Web Page&lt;br&gt;
* decipher and evaluate CSS&lt;br&gt;
* adapt CSS for your use&lt;br&gt;

<i> </i>&lt;/div&gt;
&lt;/div&gt;


&lt;table id="pippo" border="1" cellspacing="2" cellpadding="2" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;ciao&lt;/td&gt;
&lt;td&gt;come&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;va&lt;/td&gt;
&lt;td&gt;?&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;



&lt;/form&gt;


&lt;/body&gt;
&lt;/html&gt;

&lt;script language="JavaScript"&gt;
var maxH = getMaxH();
var tabsObj = document.getElementById('tabs');
var pippoObj = document.getElementById('pippo');
var top = tabsObj.offsetTop;
tabsObj.style.height = top + maxH ;
&lt;/script&gt;

×

Success!

Help @cigno5e5 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...