471,350 Members | 1,370 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,350 software developers and data experts.

Obtain height of a SELECT element.

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.
Jul 23 '05 #1
4 5756
Rithish wrote:
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
Jul 23 '05 #2
Rithish wrote:
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').scr ollIntoView(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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #3
> 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.
Jul 23 '05 #4
Rithish wrote:
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
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by delerious | last post: by
12 posts views Thread by Stanimir Stamenkov | last post: by
5 posts views Thread by Secret Guy | last post: by
3 posts views Thread by gooderthanyou | last post: by
5 posts views Thread by Kevin Myers | last post: by
6 posts views Thread by Martin Plotz | last post: by
3 posts views Thread by =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post: by
3 posts views Thread by html | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.