Any way to scroll listbox to pre-selected element?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Any way to scroll listbox to pre-selected element?

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

obj.focus() usually works just fine.
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

document.forms['list'].elements['products[]'].focus()

no assignment.. it's a function.
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post by voltrader »

[joins F.A.D. celebration]
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post 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.
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

Are you using IE? Works ok in Moz/Firefox.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

Post by voltrader »

Ah yes, it works fine in Mozilla... Thanks

Is there a workaround for IE? Seems like it would be a common issue.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

doing some checking, the javascript isn't actually doing anything, it's the browser just auto-scrolling the window.
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post 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.
Post Reply