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

Groups > comp.lang.javascript > #14130

Re: Scrolling Options in a <Select> List

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web