473,748 Members | 6,034 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to scroll OPTION into view?

Is there a way to scroll a selected OPTION into view?

I have a combination of text box and SELECT list. A user can key in
text in the text box, and depending on the entry made, the respective
option in the list is to be highlighted. Somewhat like an
autocolmplete.. . I have been able to achieve this, however, if the
position/index of the selected option is beyond the SIZE of the SELECT
list, then the OPTION positions itself at the bottom of the list.

Is there a way to scroll the selected OPTION into view? I would not
want to interchange the indexes of the OPTIONs, but merely scroll the
OPTION to be viewed at the top within the list area.

The target browser is IE 5.0+. Hence, a MS compliant solution will
also do.

Advice and suggestions solicited.

Regards,
Rithish.
Jul 23 '05 #1
3 11178
Rithish Saralaya wrote:
[...]
Is there a way to scroll the selected OPTION into view? I would not
want to interchange the indexes of the OPTIONs, but merely scroll the
OPTION to be viewed at the top within the list area.

[...]

As far as I can tell, no. In a single select list, the selected item
is always made visible, but in a multi-select list (I'm guessing that
is what you are using) it does not scroll if the selected item is
out-of-view (i.e. off the bottom of the visible area).

Even if you set an out-of-view option as selected in the HTML, it
remains out of view, even though it's selected. I guess the idea is
that if more than one is selected and the browser can't show both
simultaneously, then which one does it show?

C'est la vie

Rob.
Jul 23 '05 #2
RobG <rg***@iinet.ne t.auau> wrote in message news:<41******* *************** @per-qv1-newsreader-01.iinet.net.au >...
As far as I can tell, no. Actually speaking, this has been achieved too. However, I wasn't
confident of the solution. I do a 2-step selection. I select another
OPTION some indices below, and then select the actual OPTION. If I
have a SELECT list of 100 options of size 10, and the 50th OPTION is
to be selected, then, I first select the OPTION of index 60 ( required
OPTION index + list size ), and then select the OPTION of index 50.
This brings the 50th OPTION as the first item in the visible area.
But, as I said, I wasn't too confident of the solution. I wanted to
know if there were some methods like scrollToTop or something that
could be applied....
In a single select list, the selected item is always made visible, but in a multi-select list (I'm guessing that
is what you are using) it does not scroll if the selected item is
out-of-view (i.e. off the bottom of the visible area).

It is indeed a single select list..
Jul 23 '05 #3
Rithish Saralaya wrote:
RobG <rg***@iinet.ne t.auau> wrote in message news:<41******* *************** @per-qv1-newsreader-01.iinet.net.au >...

As far as I can tell, no.


Actually speaking, this has been achieved too. However, I wasn't
confident of the solution. I do a 2-step selection. I select another
OPTION some indices below, and then select the actual OPTION. If I
have a SELECT list of 100 options of size 10, and the 50th OPTION is
to be selected, then, I first select the OPTION of index 60 ( required
OPTION index + list size ), and then select the OPTION of index 50.
This brings the 50th OPTION as the first item in the visible area.
But, as I said, I wasn't too confident of the solution. I wanted to
know if there were some methods like scrollToTop or something that
could be applied....
In a single select list, the selected item
is always made visible, but in a multi-select list (I'm guessing that
is what you are using) it does not scroll if the selected item is
out-of-view (i.e. off the bottom of the visible area).


It is indeed a single select list..


I'd been mulling this over for a while, and finally got to test it.
I've run the following code in every browser I can, yet the right
option is always made visible when the button is clicked.

What browser are you having issues with? I've tested it in IE and it
works fine.

Cheers, Rob.

<form action="">
<select name="aSelect">
<option value="opt1">op tion 1
<option value="opt2">op tion 2
<option value="opt3">op tion 3
<option value="opt4">op tion 4
<option value="opt5">op tion 5
<option value="opt6">op tion 6
<option value="opt7">op tion 7
<option value="opt8">op tion 8
<option value="opt9">op tion 9
<option value="opt10">o ption 10
<option value="opt11">o ption 11
<option value="opt12">o ption 12
<option value="opt13">o ption 13
<option value="opt14">o ption 14
<option value="opt15">o ption 15
<option value="opt16">o ption 16
<option value="opt17">o ption 17
<option value="opt18">o ption 18
<option value="opt19">o ption 19
<option value="opt20">o ption 20
<option value="opt21">o ption 21
<option value="opt22">o ption 22
<option value="opt23">o ption 23
<option value="opt24">o ption 24
<option value="opt25">o ption 25
</select><br>
<input type="reset"><b r><br>
<input type="text" cols="10" name="aNum">
Enter a number from 1 to 25 and that option will be selected<br>
<input type="button" value="click me" onclick="
var x = this.form.aNum. value;
if (x > 0 && x < 26) {
this.form.aSele ct.options[x - 1].selected='true '
} else {
alert('From 1 to 25 please, ' + x + ' is out of bounds');
}
">
</form>
Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1460
by: sumGirl | last post by:
Hi. I have an HTML app that includes a psuedo drop-down menu I created using some css and some vbs. It looks like so: ---------- | option1 <-- vertical scroll bar option2 | option3 | option4 | option5 |
5
3685
by: Aidan | last post by:
Greetings all, I'm trying to build a div based layout for a mambo template (work in progress), and I'm having a strange problem, 2 acctually, with scroll bars in IE. I've tried everything I can think of, but just can't get it to display quite right. It's worth noting that the page displays exactly as intended in Firefox. First Problem:
2
3338
by: J Shrimps, Jr. | last post by:
Would like to remove both the "X" button and the scroll bars from Access 2000. Am planning on restricting exiting the database from a close button on each form button only. I believe some API code is necessary - at least that's what KB 300688 appears to say.
2
2454
by: Richard Hollenbeck | last post by:
Is there a way in Access that I could make it so that the end user could scroll up and down, or right and left, depending on the arrow keys depressed? In form view, instead of going left to right through each record, just scroll down a column, or to the right, or to the left, or whatever? Thanks. Rich Hollenbeck
1
4912
by: Jesper DK | last post by:
Hi, I have docked a tree view to the left on a form. When I start to populate this tree view with nodes, a horizontal scroll box appears in the bottom of the tree view even though thee tree view is big largely big enough to fit the nodes and text. If I widen the tree view the scroll bar doesn't resize itself to show the relative view size in relation to the total size. Only if I narrow the view to not fit the nodes, the scroll box...
6
1692
by: isaac2004 | last post by:
hi am making a webpage for a client that has a lot of text on thier site, i have a photoshop template that i created and i want the text to fit in a small part of template, can anybody point me in the direction of a quick scroll bar that doesnt have any bells and whisltes, thanks for the help
1
3576
by: bulldog8 | last post by:
I am working on a picture preview page ... some questions and suggestions have been incorporated already, but the 'user' (i.e. wife!) would like it to be more user friendly (if it isn't one thing, its another!!) The page is basic - a generic, blank page with navigation a picture presentation area, and a frame showing different thumbnails. Problem: Once the user has scrolled down the frame and selected a picture, the frame resets to...
4
3917
by: mkaszub | last post by:
Hi, I have a problem with combobox. On my form is many comboboxes and when I select same option and use my mouse roll, combobox change to next value. How to disable mouse roller? I tried to change focus on another combo but it isn't good solution because you again cannot scroll page but change option in combobox. I also tried to change focus to parent -> combobox.parent.focus() but if combo is on bottom of the page view is centered and I...
0
9370
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9247
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8242
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6796
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6074
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4602
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4874
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3312
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2215
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.