Obtain height of a SELECT element.

[Rithish]

Is there a way to obtain the height of a <SELECT> element dynamically,
i.e. through javascript?

I want to dynamically display a list box onFocus of a text box
element. Also, if the list box would move out of the bottom screen
area, I would want to move it up by that fraction so that it displays
at the bottom of the screen. To do this, I would need to acquire the
height of the SELECT element. I tried quite a few methods.

elem.offsetHeight // gives 0.
elem.style.height // gives nothing.
elem.style.pixelHeight // gives 0.
elem.style.posHeight // gives 0.

I also tried elem.clientHeight, which provides a value, but only after
the list is displayed atleast once ( the text box is focussed at least
once )

Our working environment is restricted to IE 5+, and a solution that is
constrained to that will also do. ( i.e. ) if there is any.

Any help/advice would be greatly appreciated.

Regards,
Rithish.

 

[Thomas 'PointedEars' Lahn]

Is there a way to obtain the height of a <SELECT> element dynamically,
i.e. through javascript?

Generelly, yes. But whether and how depends on the DOM of the UA.

I want to dynamically display a list box onFocus of a text box
element. Also, if the list box would move out of the bottom screen
area, I would want to move it up by that fraction so that it displays
at the bottom of the screen. To do this, I would need to acquire the
height of the SELECT element. I tried quite a few methods.

elem.offsetHeight // gives 0.
elem.style.height // gives nothing.
elem.style.pixelHeight // gives 0.
elem.style.posHeight // gives 0.

Well, offsetHeight should have worked. The question is rather how do
you get `elem' and how the "select" element's source code looks like.


PointedEars

 

[Grant Wagner]

Is there a way to obtain the height of a <SELECT> element dynamically,
i.e. through javascript?

I want to dynamically display a list box onFocus of a text box
element. Also, if the list box would move out of the bottom screen
area, I would want to move it up by that fraction so that it displays
at the bottom of the screen. To do this, I would need to acquire the
height of the SELECT element. I tried quite a few methods.

elem.offsetHeight // gives 0.
elem.style.height // gives nothing.
elem.style.pixelHeight // gives 0.
elem.style.posHeight // gives 0.

I also tried elem.clientHeight, which provides a value, but only after
the list is displayed atleast once ( the text box is focussed at least
once )

Our working environment is restricted to IE 5+, and a solution that is
constrained to that will also do. ( i.e. ) if there is any.

Any help/advice would be greatly appreciated.

Regards,
Rithish.

Actually, to make the <select> scroll into the viewport in IE6SP1 and
Gecko-based browsers use:

<a href="#"
onclick="document.getElementById('mySelectId').scrollIntoView(false);return
false;">Scroll</a>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p>
<form>
<select name="mySelectName" id="mySelectId" size="4">
<option>text</option>
<option>text</option>
<option>text</option>
<option>text</option>
<option>text</option>
<option>text</option>
<option>text</option>
</select>
</form>

scrollIntoView() takes a boolean parameter, true if you want the element
to be scrolled to the top of the view port, false if you want it to scroll
only far enough to be completely visible.

If you want it to work in IE6SP1, Gecko-based browsers and Opera 7.53, you
can use:

<a href="#"
onclick="
window.scrollTo(
0,
document.getElementById('mySelectId').offsetTop +
document.getElementById('mySelectId').offsetHeight
);
return false;
">Scroll</a>

(split across multiple lines to avoid wrapping issues)

Note, with either of these solutions, you should wrap it in a function and
test for the appropriate methods and properties before attempting to use
them.

 

[Rithish]

Well, offsetHeight should have worked. The question is rather how do

you get `elem' and how the "select" element's source code looks like.


PointedEars

The <SELECT> element is defined within a <DIV> and the <DIV> is hidden
by default. Onfocus of the textBox, the <DIV> would be displayed
again.

Well.. I did a bit of trial and error and found out this piece of
information.

I was using the display property of the STYLE attribute to
display/hide the DIV. ( <DIV STYLE='display:none'> ). I found that the
first time the txtBox is set focus, offsetHeight of the <SELECT>
element returns 0. However, on subsequent focus, offsetHeight returns
a value. Why and why not? I am stumped.
I substituted the 'display' property with 'visibility' ( <DIV
STYLE='visibility:hidden'> ) and lo.. all is fine. offsetHeight always
returns a value.


Regards,
Rithish.

 

[Thomas 'PointedEars' Lahn]

Well, offsetHeight should have worked. The question is rather how do
you get `elem' and how the "select" element's source code looks like.
[...]

The <SELECT> element is defined within a <DIV> and the <DIV> is hidden
[display:none] by default. Onfocus of the textBox, the <DIV> would be
displayed again.
[...]
I substituted the 'display' property with 'visibility' ( <DIV
STYLE='visibility:hidden'> ) and lo.. all is fine. offsetHeight always
returns a value.

Of course. In contrast to visibility:hidden, display:none prevents the UA
from rendering the element. Where nothing is rendered, no offset-height
can be computed.


PointedEars