473,237 Members | 1,395 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,237 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 5890
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: delerious | last post by:
I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I...
12
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5">...
5
by: Secret Guy | last post by:
Because of my experience posting various places over the last couple of weeks: I'm expecting to be greated with hostility for asking about concepts instead of "practical" things, since that has...
3
by: gooderthanyou | last post by:
I have a textfield and you of course you can select text... When they hit the bold button I want it to obtain the selected text and bold it, the hard part is trying to figure out if javascript...
3
by: Jarek Mielcarek | last post by:
hi all, in xml file I have some fields which are source for <textarea> element. I'd like to transform this file using xslt and set the rows property of <textarea> depend of lines in some source...
5
by: Kevin Myers | last post by:
How can one obtain obtain the height of a MS Access 2K form? There is a width property, but I don't see a corresponding height property. I need to obtain the height of the form so that I can...
6
by: Martin Plotz | last post by:
Dear Newsgroup, I would like to have a page with a footer on the bottom of the page with a fixed height. The upper part should have the remaining height. In frames I could achieve this with "*" as...
3
by: =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post by:
I'm working with a requirement to make a selectbox the same height as normal text input elements. (at least for IE7) But in IE the selectbox reacts strangely to the CSS rules. Normally, there...
3
by: html | last post by:
I have a select tag as follows <SELECT ID="Select1" NAME="Select1" ONCHANGE="do_alert()"> <OPTION>1</OPTION> <OPTION>2</OPTION> </SELECT> I need, when the user choose an option, to print an...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.