How to scroll OPTION into view?

Discussion in 'Javascript' started by Rithish Saralaya, Nov 9, 2004.

  1. 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.
     
    Rithish Saralaya, Nov 9, 2004
    #1
    1. Advertising

  2. Rithish Saralaya

    RobG Guest

    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.
     
    RobG, Nov 9, 2004
    #2
    1. Advertising

  3. RobG <> wrote in message news:<4190afdb$0$6560$>...

    > 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..
     
    Rithish Saralaya, Nov 10, 2004
    #3
  4. Rithish Saralaya

    RobG Guest

    Rithish Saralaya wrote:
    > RobG <> wrote in message news:<4190afdb$0$6560$>...
    >
    >
    >> 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">option 1
    <option value="opt2">option 2
    <option value="opt3">option 3
    <option value="opt4">option 4
    <option value="opt5">option 5
    <option value="opt6">option 6
    <option value="opt7">option 7
    <option value="opt8">option 8
    <option value="opt9">option 9
    <option value="opt10">option 10
    <option value="opt11">option 11
    <option value="opt12">option 12
    <option value="opt13">option 13
    <option value="opt14">option 14
    <option value="opt15">option 15
    <option value="opt16">option 16
    <option value="opt17">option 17
    <option value="opt18">option 18
    <option value="opt19">option 19
    <option value="opt20">option 20
    <option value="opt21">option 21
    <option value="opt22">option 22
    <option value="opt23">option 23
    <option value="opt24">option 24
    <option value="opt25">option 25
    </select><br>
    <input type="reset"><br><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.aSelect.options[x - 1].selected='true'
    } else {
    alert('From 1 to 25 please, ' + x + ' is out of bounds');
    }
    ">
    </form>
     
    RobG, Nov 12, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Saravana

    Re: Scroll Row in Table into View?

    Saravana, Jul 28, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    731
    szabelin
    Jul 28, 2003
  2. Ravikanth[MVP]

    Q: DataGrid: scroll a row into view??

    Ravikanth[MVP], Aug 21, 2003, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    174
    Ravikanth[MVP]
    Aug 21, 2003
  3. Parthiv Joshi
    Replies:
    1
    Views:
    816
    Samuel L Matzen
    Jul 6, 2004
  4. Replies:
    0
    Views:
    177
  5. Replies:
    8
    Views:
    256
Loading...

Share This Page