Page 1 of 1

Any way to scroll listbox to pre-selected element?

Posted: Tue Aug 31, 2004 1:56 pm
by voltrader
I have a listbox auto-highlighted by a POSTed variable.

Most of the time the highlighted term is off-screen. Is there any way to get js to autoscroll to the highlighted term?

Posted: Tue Aug 31, 2004 2:00 pm
by feyd
obj.focus() usually works just fine.

Posted: Tue Aug 31, 2004 5:14 pm
by voltrader
Something like this?

Code: Select all

<select name=products&#1111;] multiple size=3 class=text>
<option value="a">All</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
</select>

<script language=javascript>
document.list.products&#1111;].element&#1111;'7'].focus()=true;
</script>

Posted: Tue Aug 31, 2004 5:15 pm
by feyd
document.forms['list'].elements['products[]'].focus()

no assignment.. it's a function.

Posted: Tue Aug 31, 2004 5:16 pm
by voltrader
[joins F.A.D. celebration]

Posted: Tue Aug 31, 2004 5:38 pm
by voltrader
Apologies for the redux:

I tried this, and option '7' is highlighted, but it is still out of view.

Options 1 to 3 are displayed (size=3), and 7 is highlighted if user scrolls down.

Code: Select all

<form name=list>
<table>
<td>
<select name=products&#1111;] multiple size=3 class=text> 
<option value="a">All</option> 
<option value="1" >1</option> 
<option value="2" >2</option> 
<option value="3" >3</option> 
<option value="4" >4</option> 
<option value="5" >5</option> 
<option value="6">6</option> 
<option value="7" selected>7</option> 
<option value="8" >8</option> 
<option value="9" >9</option> 
<option value="10" >10</option> 
<option value="11" >11</option> 
</select>
</td>
</table>
<script language=javascript> 
document.forms&#1111;'list'].elements&#1111;'products&#1111;7]'].focus(); 
</script>
</form>
If there are no other options, I could rearrange the array to display options 6,7,8 first, but that's a messy solution.

Posted: Tue Aug 31, 2004 5:42 pm
by markl999
Are you using IE? Works ok in Moz/Firefox.

Posted: Tue Aug 31, 2004 5:43 pm
by feyd
elements['products[7]'] isn't the name of any element in the form.. just use products[] since that's the select's name.

Posted: Tue Aug 31, 2004 5:45 pm
by voltrader
Ah yes, it works fine in Mozilla... Thanks

Is there a workaround for IE? Seems like it would be a common issue.

Posted: Tue Aug 31, 2004 6:17 pm
by feyd
doing some checking, the javascript isn't actually doing anything, it's the browser just auto-scrolling the window.

Posted: Tue Aug 31, 2004 6:21 pm
by markl999
I just reached the same conclusion myself ;)
Remove the JS and Gecko based browsers scroll to the selected one, IE doesn't, i havn't found a fix though i feel it's a simple one.