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

Groups > comp.lang.javascript > #14129

Re: Scrolling Options in a <Select> List

Show all headers | View raw

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

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