Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14110 > unrolled thread

Scrolling Options in a <Select> List

Back to article view | Back to comp.lang.javascript

Contents

  Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-23 13:54 -0600
    Re: Scrolling Options in a <Select> List "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-05-23 21:18 +0000
      Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-23 17:15 -0600
        Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-23 17:41 -0600
          Re: Scrolling Options in a <Select> List SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-05-24 14:27 +0200
            Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-24 08:33 -0600
              Re: Scrolling Options in a <Select> List SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-05-24 17:15 +0200
          Re: Scrolling Options in a <Select> List "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-05-24 14:44 +0000
    Re: Scrolling Options in a <Select> List SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-05-24 15:03 +0200
      Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-24 08:35 -0600
        Re: Scrolling Options in a <Select> List SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-05-24 17:14 +0200
          Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-24 09:30 -0600
            Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-24 10:16 -0600
              Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-24 10:34 -0600
                Re: Scrolling Options in a <Select> List Scott Sauyet <scott.sauyet@gmail.com> - 2012-05-24 09:47 -0700
                Re: Scrolling Options in a <Select> List SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-05-25 10:05 +0200
                  Re: Scrolling Options in a <Select> List "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-25 08:39 -0600

#14110 — Scrolling Options in a <Select> List

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 

[toc] | [next] | [standalone]

#14112

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)

[toc] | [prev] | [next] | [standalone]

#14115

Evertjan said:

> Better show a minimal working code.
>


Evertjan:

    I'll try to do that this evening.

Thank you.

-Mel

[toc] | [prev] | [next] | [standalone]

#14116

Hi Evertjan:

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

Thank you !

--Mel Smith

[toc] | [prev] | [next] | [standalone]

#14121

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

[toc] | [prev] | [next] | [standalone]

#14123

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

[toc] | [prev] | [next] | [standalone]

#14127

Le 24/05/12 16:33, Mel Smith a écrit :
> 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.

Who now ?

Who should be interested ?


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

[toc] | [prev] | [next] | [standalone]

#14125

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.

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

[toc] | [prev] | [next] | [standalone]

#14122

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)
-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#14124

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

[toc] | [prev] | [next] | [standalone]

#14126

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

[toc] | [prev] | [next] | [standalone]

#14128

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

[toc] | [prev] | [next] | [standalone]

#14129

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 ****

[toc] | [prev] | [next] | [standalone]

#14130

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 !

--
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) ;        //********* UNCOMMENT THIS 
> STATEMENT  and it now works ! ****
> 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 ****
>
> 

[toc] | [prev] | [next] | [standalone]

#14131

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

[toc] | [prev] | [next] | [standalone]

#14146

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);
}


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

[toc] | [prev] | [next] | [standalone]

#14161

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web