PDA

Click to See Complete Forum and Search --> : how to retrieve elements height

cigno5e5
03-09-2004, 06:09 AM
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!!!


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);
}


some suggestions?
JayDie
03-09-2004, 06:35 AM
WHAT element do you want to get the height of? DIV or what?

JayDie
cigno5e5
03-09-2004, 06:44 AM
now i'm tring with a div...
Khalid Ali
03-09-2004, 07:04 AM
use

object.offsetHeight or
object.offsetWidth

in NS6+ though,you will have to explicitly set the height and then retrieve it.
cigno5e5
03-09-2004, 07:13 AM
Originally posted by Khalid Ali
use

object.offsetHeight or
object.offsetWidth

in NS6+ though,you will have to explicitly set the height and then retrieve it.

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...
cigno5e5
03-09-2004, 07:38 AM
another question...the property offsetHeight has only getter (mozilla says)...how to set?
cigno5e5
03-09-2004, 09:17 AM
did. mybe useful to everybody

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
.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;
}
</style>
<script language="JavaScript">
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 < allTabs.length; i++) {
var wichTab = allTabs[i];

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

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

</script>

</head>

<body>


<form name="myForm" action="#" method="post">

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

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

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

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

</div>
</div>


<table id="pippo" border="1" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>ciao</td>
<td>come</td>
</tr>
<tr>
<td>va</td>
<td>?</td>
</tr>
</table>



</form>


</body>
</html>

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