Scrolling Options in a <Select> List

[Mel Smith]

Hi:

I'm stumbling along now in building my new app, but I have another
problem that I can't answer:

I have a <select> box with a viewable area of about 20 lines.

I am (programmatically) filling the options individually into this list
from the top down (using optionobj.add(...) ) with about 80 options.

While filling this select list, and when I reach the bottom of the
viewable area of the <select> element (which is set to overflow:scroll), I
wish the bottom of the list to 'jump up' after every added option entry so
that I show the latest option at the bottom of the viewable area, while the
uper options disappear off the top of the list

But, even with optel.scrollIntoView(true) -- or (false), the option list
won't jump up -- even though the option is correctly added -- when I
manually drag down the vertical scroll bar.

I even tried to set focus to this last added option, but still it
doesn't 'jump into view'

Have you any tips/suggestions for me please ??

Thank you.

--
Mel Smith

[Evertjan.]

Mel Smith wrote on 23 mei 2012 in comp.lang.javascript:

> Hi:
>
> I'm stumbling along now in building my new app, but I have another
> problem that I can't answer:
>
> I have a <select> box with a viewable area of about 20 lines.
>
> I am (programmatically) filling the options individually into this
> list
> from the top down (using optionobj.add(...) ) with about 80 options.
>
> While filling this select list, and when I reach the bottom of the
> viewable area of the <select> element (which is set to
> overflow:scroll), I wish the bottom of the list to 'jump up' after
> every added option entry so that I show the latest option at the
> bottom of the viewable area, while the uper options disappear off the
> top of the list

Better show a minimal working code.

> But, even with optel.scrollIntoView(true) -- or (false), the
> option list
> won't jump up -- even though the option is correctly added -- when I
> manually drag down the vertical scroll bar.
>
> I even tried to set focus to this last added option, but still it
> doesn't 'jump into view'
>
> Have you any tips/suggestions for me please ??
>
> Thank you.
>
> --
> Mel Smith
>
>
>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Mel Smith]

Evertjan said:

> Better show a minimal working code.
>

Evertjan:

I'll try to do that this evening.

Thank you.

-Mel

[Mel Smith]

Hi Evertjan:

I sent you by email a test version of my problem page.

Thank you !

--Mel Smith

[SAM]

Le 24/05/12 01:41, Mel Smith a écrit :

> Hi Evertjan:
>
> I sent you by email a test version of my problem page.
>
> Thank you !

And ... all other guys aren't allowed to see it ?

You can upload freely your test file on a web site
ie : <http://cjoint.com/>
and give here it's url

(I didn't understand what could be your problem !)
--
Stéphane Moriaux avec/with iMac-intel

[SAM]

Le 23/05/12 21:54, Mel Smith a écrit :

>
> I have a<select> box with a viewable area of about 20 lines.
> I am (programmatically) filling the options individually into this list
> from the top down (using optionobj.add(...) ) with about 80 options.

var mySelect = document.forms[0].elements['theSelector'];
// empty the select
mySelect.options.length = 0;
// filling the select
for (var i=0, n = myArray.length; i<n; i++)
{
var z = mySelect.options.length;
var o = new Option(myArray[i].text, myArray[i].value);
mySelect.options[z] = o;
// show/focus the new option
mySelect.selectedIndex = z;
}


(note: my Fx jumps naturally to the last entry at the bottom)

[Mel Smith]

Stephane said:

">
> And ... all other guys aren't allowed to see it ?
>
> You can upload freely your test file on a web site
> ie : <http://cjoint.com/>
> and give here it's url

Stephane :

Its over 400 lines long, and I didn't want to bore people who have no
interest.

-Mel

[Mel Smith]

Sam a dit:

> var mySelect = document.forms[0].elements['theSelector'];
> // empty the select
> mySelect.options.length = 0;
> // filling the select
> for (var i=0, n = myArray.length; i<n; i++)
> {
> var z = mySelect.options.length;
> var o = new Option(myArray[i].text, myArray[i].value);
> mySelect.options[z] = o;
> // show/focus the new option
> mySelect.selectedIndex = z;
> }
>
>
> (note: my Fx jumps naturally to the last entry at the bottom)

Stephane:

I'll try that out and let you know.

In the meantime, I'll email you my current test page.

-Mel

[Evertjan.]

Mel Smith wrote on 24 mei 2012 in comp.lang.javascript:

> Hi Evertjan:
>
> I sent you by email a test version of my problem page.
>
> Thank you !

I wrote:
>>> Better show a minimal working code.

A whole page,
799 lnes of code,
is more than that.

and please post to the group.

[SAM]

Le 24/05/12 16:35, Mel Smith a �crit :

> Sam a dit:
>
>> var mySelect = document.forms[0].elements['theSelector'];
>> // empty the select
>> mySelect.options.length = 0;
>> // filling the select

(...)

> Stephane:
>
> I'll try that out and let you know.
>
> In the meantime, I'll email you my current test page.

No thanks,
the discus is here in the group.


--
St�phane Moriaux avec/with iMac-intel

[SAM]

Le 24/05/12 16:33, Mel Smith a écrit :

Who now ?

Who should be interested ?

[Mel Smith]

Stephane said:
> No thanks,
> the discus is here in the group.
>

Stephane :

I understand :((

(But I think I'm incapable of making a simple test of a complex (for
me) app (700 lines)with a big member list, and player list , and database
implications etc, etc)

But I'll try :((

Anyway, I tried your solution (selectedIndex), and it didn't show the
new option in the visible area of the screen for me. But now I'll try to
incorporate your code into a small test page. I hope my brain doesn't fry
:(

Thank you.

-Mel Smith

[Mel Smith]

Hi:

Below is my attempt at producing a 'small' test page for my problem. The
test instructions are embedded in the page.

Thank you.

--
Mel Smith

************ the test page is below *********
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Senior Men's Draw</title>

<style type="text/css" media="screen">

body {
font-family: Arial,"Microsoft Sans Serif","Times New Roman" ;
font-size: 14px;
text-align: center;
}
div#container {
position: relative;
width: 980px;
height: 540px;
margin-left: auto;
margin-right: auto;
padding: 1px;
text-align: center;
background: greenyellow;
border: 1px solid black;
}

div#ihold {
position: absolute;
width: 21em;
top: 10px;
left: 1em;
height: 14px;
margin-left: 0px;
margin-right: 0px;
padding: 1px;
text-align: center;
}

div#imemtitle {
position: absolute;
width: 9em;
top: 40px;
left: .5em;
height: 15px;
font-weight: bold;
text-decoration: underline;
}
div#imembers {
position: absolute;
width: 9em;
top: 60px;
left: .5em;
height: 400px;
margin-left: 0px;
margin-right: 0px;
overflow: auto;
padding: 1px;
background: yellow;
border: 1px solid black;
}

div#iplrtitle {
position: absolute;
width: 9em;
top: 40px;
left: 11em;
height: 15px;
font-weight: bold;
text-decoration: underline;
}
div#iplayers {
position: absolute;
width: 9em;
top: 60px;
left: 11em;
height: 400px;
margin-left: 0px;
margin-right: 0px;
overflow: scroll;
padding: 1px;
background: yellow;
border: 1px solid black;
}
div#imessage {
position: absolute;
width: 24em;
left: 2em;
top: 480px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
display: none;
}
div#ihowtotest {
position: absolute;
top: 100px;
width: 35em;
height: 200px;
left: 30em;
padding: 5px;
border: 1px solid black ;
}

</style>

<script type="text/javascript">

var memobjs,memvals,memtext ;
var plrobjs,plrvals,plrtext ;
var drwobjs,drwvals,drwtext ;

memobjs = new Array() ;
memvals = new Array() ;
memtext = new Array() ;

plrobjs = new Array() ;
plrvals = new Array() ;
plrtext = new Array() ;

drwobjs = new Array() ;
drwvals = new Array() ;
drwtext = new Array() ;

var memsel,plrsel ;

function setfocusfields() {

var rootid = "imembername" ;
var rootel = document.getElementById(rootid) ;
memsel = rootel ; // save id of member <select> element
memsel.onclick = focusOnMemElement ;

var memopts = rootel.getElementsByTagName("option") ;

var el,elid ;

for (var i=0;i<memopts.length;i++) {
el = memopts[i] ;
if (el.value != "X") {
memvals.push(el.value);
el.id = "imem" + el.value ;
memobjs.push(el.id) ;
memtext.push(el.text) ;
//el.onblur = setBlurColor ;
}
}

// now set up the players select element
rootid = "iplayername" ;
rootel = document.getElementById(rootid) ;
plrsel = rootel ; // save id of member <select> element
plrsel.onclick = focusOnPlrElement ;

}

function setFocusColor(el) {
el.style.background = "yellow" ;
el.style.color = "black" ;
return true ;
}

function setBlurColor(el) {
el.style.background = "yellow" ;
el.style.color = "black" ;
return true ;
}

function focusOnPlrElement() {
var holdel = document.getElementById("iholdcell") ;
var selindex = this.selectedIndex ;
var optel = plrsel.options[selindex] ;
if (optel.value == "X") {
window.alert("Faulty Selection ! Please Try Again") ;
return false ;
}
if (!empty(optel.style.background)) {
window.alert("This Player ALREADY on the Draw ! Please Try Again") ;
return false ;
}
setFocusColor(optel) ;

var plrcode = optel.value ;
var plrname = optel.text ;
holdel.value = plrcode+" "+plrname ;
drwadd(plrcode,plrname) ;
return true;
return true ;
}

function focusOnMemElement() {
var holdel = document.getElementById("iholdcell") ;
var selindex = this.selectedIndex ;
var optel = memsel.options[selindex] ;
if (optel.value == "X") {
window.alert("Faulty Selection ! Please Try Again") ;
return false ;
}
if (!empty(optel.style.background)) {
window.alert("This Member ALREADY Selected ! Please Try Again") ;
return false ;
}
setFocusColor(optel) ;

//if (e == null ) e = window.event ;
//var nkey = e.keyCode ;
var memcode = optel.value ;
var memname = optel.text ;
holdel.value = memcode+" "+memname ;
plradd(memcode,memname) ;
return true;
}

function plradd(memcode,memname) {
// add the member to the player's list now at the end
// plrsel is the player's select object
// first make it one bigger to accommodate the next player
plrsel.size += 1 ;
var option = document.createElement("option") ;
option.text = memname ;
option.value = memcode ;
option.id = "iplr" + memcode ;
option.name = "plr" + memcode ;
try
{
// for IE earlier than version 8
plrsel.add(option,plrsel.options[null]) ;
}
catch (e)
{
plrsel.add(option,null) ;
}

// now try to ensure that the latest 'add' is displayed even
// though it is off the screen

var plroptlen = plrsel.options.length ;

//window.alert("Number of options is: " + plroptlen) ;

var plroptel = document.getElementById(option.id) ;
//plroptel.scrollIntoView(false) ;
plroptel.selectedIndex=plroptlen ;

var msgcell = document.getElementById("imsgcell") ;
msgcell.value = "Added: " + memcode+" " + memname
var msgdivel = document.getElementById("imessage") ;
msgdivel.style.display = "block" ;
return true ;
}

function drwadd(plrcode,plrname) {
// add the player to the actual draw
window.alert("Add the player to the Actual Draw now.") ;
return true ;
}

function alltrim(str) {
return str.replace(/^\s+|\s+$/g,"") ;
}

function empty(str) {
if (typeof str === "string" && str.length === 0) return true ;
if (typeof str === "number" && str.value === 0) return true ;
return false ;
}

</script>


</head>
<body onload="setfocusfields();">

<div id="container">
<form id="mainmenu" name="frmmenu" action="#" method="post">
<input type="hidden" id="mformname" name="formname" value="EDITDRAW" />
<h3 style="text-align:center;text-decoration:underline">Test Option
Viewability</h3>
<div id="ihold">
Holding&nbsp;<input type="text" style="color:blue;background:yellow;"
id="iholdcell" size="25" maxlength="25" readonly value="" />&nbsp;Cell
</div>

<div id="imessage">
<input type="text" style="color:black;background:yellow;" id="imsgcell"
size="30" maxlength="30" readonly value="" />
</div>

<div id="imemtitle">
Member List
</div>
<div id="imembers">
<select id="imembername" name="membername" style="font-size:12px;"
size="40">
<option value="X" selected="selected">Select a Member</option>
<option value="3101">Anderson, Harry</option>
<option value="3102">Aubin, Ronald</option>
<option value="3103">Bamber, Bill</option>
<option value="3104">Beisel, Cliff</option>
<option value="3105">Bennett, Gary</option>
<option value="3106">Breault, Henri</option>
<option value="3107">Breault, Ronald</option>
<option value="3108">Buchanan, Bill</option>
<option value="3109">Burly, John</option>
<option value="3110">Cathcart, Chuck</option>
<option value="3111">Cheung, William</option>
<option value="3112">Chobater, Ed.</option>
<option value="3113">Corrigan, Ed.</option>
<option value="3114">Cutting, Cyrl</option>
<option value="3115">Darlington, Ken</option>
<option value="3116">Dean, Michael</option>
<option value="3117">DeJong, Jack</option>
<option value="3118">Denis, Paul</option>
<option value="3119">Dove, Jim</option>
<option value="3120">Draper, Mike</option>
<option value="3121">Gaudet, Maurice</option>
<option value="3122">Gerard, Mel</option>
<option value="3123">Gibson, Neil</option>
<option value="3124">Gignac, Dennis</option>
<option value="3125">Gleiberman, Norm</option>
<option value="3126">Gowin, Grant</option>
<option value="3127">Graves David</option>
<option value="3128">Gundeson, John</option>
<option value="3129">Gust, Bill</option>
<option value="3130">Hopkins, Ray</option>
<option value="3131">Howard, Les</option>
<option value="3132">Hurak, Jerry</option>
<option value="3133">Itterman, Nelson</option>
<option value="3134">Johnson, Peter</option>
<option value="3135">Kasha, Ron</option>
<option value="3136">Killian, Roy</option>
<option value="3137">Kitt, Steve</option>
<option value="3138">Kruger, Merv</option>
<option value="3139">Kwasnycia, Nick</option>
</select>
</div>
<div id="iplrtitle">
Draw List
</div>
<div id="iplayers">
<select id="iplayername" name="playername"
style="font-size:12px;overflow:scroll;" size="1">
<option value="X" selected="selected">Select Below for Draw</option>
</select>
</div>
</form>
<div id="ihowtotest" style="text-align:left;">
How to Test:<br /><br />
1. Click on a person in the Member List.<br />
2. Note that the person shows up in the Draw List.<br />
3. When you add people to the Draw List, and when the visible<br />
area is filled up, the latest added person (i.e., option) does not<br />
become visible without actually moving the scroll bar downwards.<br /><br
/>
4. What can I do to show the last person added to the Draw List please ?<br
/>
</div>
</div>
</body>
</html>

************ end of test page ****

[Mel Smith]

Hi:

I solved the problem:

All I had to do was to 'un-comment' the scrollIntoView() function below,
and it now works !

Thanks to all who tried to help !

> //plroptel.scrollIntoView(false) ; //********* UNCOMMENT THIS
> STATEMENT and it now works ! ****

[Scott Sauyet]

Mel Smith wrote:
> I solved the problem:

Congratulations!

> All I had to do was to 'un-comment' the scrollIntoView() function below,
> and it now works !

And that's why it helps to create reduced test cases!

-- Scott

[SAM]

Le 24/05/12 18:34, Mel Smith a écrit :

> Hi:
>
> I solved the problem:

In the list on left,
I can't add "Gignac, Denis" and all players bellow ...
(listed in the part not shown that we have to scroll down)

So ... the list on right has not to be scrolled ...

The selected guy on left (I click on it) isn't shown on right until I
leave the left option ... normal ?

> All I had to do was to 'un-comment' the scrollIntoView() function below,
> and it now works !

Wonderfull !! Marvelous !

I do not understand how you expect to give a 'selectedIndex' to an 'option'
(the selectedIndex is the index in the select's options)

var plroptel = document.getElementById(option.id) ;
//plroptel.scrollIntoView(false) ;

plroptel.selectedIndex = plroptlen ;

> Thanks to all who tried to help !

function empty(str) {
return (typeof str === "string" && str.length === 0) ||
(typeof str === "number" && str.value === 0);

[Mel Smith]

Stephane said:
> I can't add "Gignac, Denis" and all players bellow ...
> (listed in the part not shown that we have to scroll down)

The list of Members on the Left are from my database of members. The
list on the right are those people who have chosen to play in the next golf
tournament. So, the Left Member list will only be added to by the Draw
Master on a page which I haven't designed yet.

>
> So ... the list on right has not to be scrolled ...
>
> The selected guy on left (I click on it) isn't shown on right until I
> leave the left option ... normal ?

I don't like it that way and I don't know if its 'normal' or not, but
I'll try to fix it later. I'm under time pressure now to get the actual
'Draw' completed. Lots to do ! (I'm only about 40% complete)

>> I do not understand how you expect to give a 'selectedIndex' to an
>> 'option'
> (the selectedIndex is the index in the select's options)
>
> var plroptel = document.getElementById(option.id) ;
> //plroptel.scrollIntoView(false) ;
> plroptel.selectedIndex = plroptlen ;

I'll look at and fix the above. Thank you !

Now, this morning I have to include 'Screen Names' in final Draw Sheet
instead of formal names (e.g.,, Mel Smith instead of Smith, Mel)

Thanks again for the comments !

-Mel Smith