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

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

Either Chrome is crazy or *I* am :(

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

Contents

  Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-14 18:04 -0600
    Re: Either Chrome is crazy or *I* am :( Jeff North <jnorthau@yahoo.com.au> - 2012-07-15 13:29 +1000
      Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-14 22:31 -0600
        Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-15 10:05 -0600
          Re: Either Chrome is crazy or *I* am :( Matt McDonald <matt@fortybelow.ca> - 2012-07-15 10:48 -0600
            Re: Either Chrome is crazy or *I* am :( "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-07-15 17:05 +0000
              Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-15 12:49 -0600
            Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-15 12:41 -0600
    Re: Either Chrome is crazy or *I* am :( SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-16 17:46 +0200
      Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-16 10:14 -0600
        Re: Either Chrome is crazy or *I* am :( Christoph Becker <cmbecker69@gmx.de> - 2012-07-16 19:31 +0200
          Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-16 12:21 -0600
            Re: Either Chrome is crazy or *I* am :( Christoph Becker <cmbecker69@gmx.de> - 2012-07-16 20:44 +0200
              Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-16 15:07 -0600
        Re: Either Chrome is crazy or *I* am :( SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-17 01:47 +0200
          Re: Either Chrome is crazy or *I* am :( "Mel Smith" <med_cutout_syntel@aol.com> - 2012-07-30 13:31 -0600

#15053 — Either Chrome is crazy or *I* am :(

Hi:

    For the last 4 days, I've been 'beating my head against the wall' over a 
Chrome (and maybe a Safari) JavaScript problem.

Situation:
    -    I have the most current browsers on my dev machines for Chrome, IE, 
Safari and FF
    -    I do 'most' of my testing on IE7 thru 9, then on FF.
    -    Infrequently, I back-test on Chrome and Safari.

Problem Background:
    -    I am building a web app for my fellow senior golfers (a Tee Time / 
Draw system for us).
    -    Essential parts of the JS part of the app are two <Select> elements 
with up to 95 <option>'s in them.
    -    When I 'click' on an <option> of the Membership List <select> 
element, my code takes the 'text' of that <option> (i.e., the golfer's name) 
and adds it to the option list of the *other* <select> element (the Players 
List), and then the added option is immediately viewable by my use <select> 
.add method, and of the scrollIntoView method.
    -    This works perfectly for IE and FF,

    BUT,

    -    In Chrome, if I first 'select' a member near the *bottom* of the 
Membership List, all Hell breaks loose:  the focus of the <select> list goes 
up to a completely un-related selectedIndex, and nothing is transferred to 
the second <select> list (which is a list of 'selected' players for the next 
golf meet.)

    -    However, if I start near the *top* of the member's <select> list 
and start clicking/transferring, then it proceeds smoothly and correctly.

    -    But (again) if I make my *first* click near the bottom of the 
<select> list, then, game over :(

    So, it looks like Chrome (and maybe Safari) do not like *long* option 
lists for their <select> elements, and in particular, they don't like 
'clicking' near the bottom first.

So, you say: give me an example Mel:

    Well, the JS in this single page is 1224 lines long  (with no 
librairies) and all my own ugly code, and *if* I could make a reasonably 
sized sample, it probably would work.

Question:

    Before spending another day trying to make a simple sampe, is there 
*some* difference between Chrome and FF that I should iunvestigate first ?

Thank you !

-- 
Mel Smith

[toc] | [next] | [standalone]

#15054

On Sat, 14 Jul 2012 18:04:30 -0600, in comp.lang.javascript "Mel
Smith" <med_cutout_syntel@aol.com>
<a6efohFhqlU1@mid.individual.net> wrote:

>| Hi:
>| 
>|     For the last 4 days, I've been 'beating my head against the wall' over a 
>| Chrome (and maybe a Safari) JavaScript problem.
>| 
>| Situation:
>|     -    I have the most current browsers on my dev machines for Chrome, IE, 
>| Safari and FF
>|     -    I do 'most' of my testing on IE7 thru 9, then on FF.
>|     -    Infrequently, I back-test on Chrome and Safari.
>| 
>| Problem Background:
>|     -    I am building a web app for my fellow senior golfers (a Tee Time / 
>| Draw system for us).
>|     -    Essential parts of the JS part of the app are two <Select> elements 
>| with up to 95 <option>'s in them.
>|     -    When I 'click' on an <option> of the Membership List <select> 
>| element, my code takes the 'text' of that <option> (i.e., the golfer's name) 
>| and adds it to the option list of the *other* <select> element (the Players 
>| List), and then the added option is immediately viewable by my use <select> 
>| .add method, and of the scrollIntoView method.
>|     -    This works perfectly for IE and FF,
>| 
>|     BUT,
>| 
>|     -    In Chrome, if I first 'select' a member near the *bottom* of the 
>| Membership List, all Hell breaks loose:  the focus of the <select> list goes 
>| up to a completely un-related selectedIndex, and nothing is transferred to 
>| the second <select> list (which is a list of 'selected' players for the next 
>| golf meet.)
>| 
>|     -    However, if I start near the *top* of the member's <select> list 
>| and start clicking/transferring, then it proceeds smoothly and correctly.
>| 
>|     -    But (again) if I make my *first* click near the bottom of the 
>| <select> list, then, game over :(
>| 
>|     So, it looks like Chrome (and maybe Safari) do not like *long* option 
>| lists for their <select> elements, and in particular, they don't like 
>| 'clicking' near the bottom first.
>| 
>| So, you say: give me an example Mel:
>| 
>|     Well, the JS in this single page is 1224 lines long  (with no 
>| librairies) and all my own ugly code, and *if* I could make a reasonably 
>| sized sample, it probably would work.
>| 
>| Question:
>| 
>|     Before spending another day trying to make a simple sampe, is there 
>| *some* difference between Chrome and FF that I should iunvestigate first ?
>| 
>| Thank you !

Can you swap out your code for the code found at
http://www.mattkruse.com/javascript/selectbox/

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

#15055

Jeff said:

> Can you swap out your code for the code found at
> http://www.mattkruse.com/javascript/selectbox/
>

Jeff: Maybe I can ??

    But, in the mean time,  below is the 'onclick' function that is called 
when I 'click' on one of the members in the first <select> list

    I have my 'bugmsg()' function scattered thruout the function, because if 
I use the Alert() function for my tracking/testing, then the Alert seems to 
allow Chrome to work correctly (I think) ...

    Anyway, these bug messages show that (in Chrome) I *never* enter this 
next function *IF* I click on an <option> near the bottom of the long list 
*first*???.  *If* I click in the top or middle, then the final bugmsg below 
displays, and a player is added to the second <select> list. Even when I go 
to the bottom, the player is added -- but only if I start near the top or 
middle

    Anyway, I'll look at your link, and see if anything pops into my mind

    btw, I demo'ed to a few of my fellow senior golfers this past Tuesday, 
and haphazardly chose Chrome for the demo.  It worked great until someone 
decided to click on the last member in the list first, then all Hell broke 
loose.   I was dumbfounded ::(

Anyway, here's the small function when the action takes place (or doesn't)

-Mel


**************************************************************
function focusOnMemElement(e) {    // the MEMBER <Select" element (approx 95 
members)
   bugmsg("")  ;
   bugmsg("a. in focusOnMemElement") ;

   var selindex = memsel.selectedIndex ;    // memsel -- the members 
<select> object - global
   var optel = memsel.options[selindex] ;    // optel -- the option clicked 
on
   if (optel.value == "X") {    // the 'help' option at the top of the list 
(i.e., click on a member)
      window.alert("Faulty Selection !  Please Try Again") ;
      return false ;
   }
   var bakgnd = alltrim(optel.style.background) ;    // Background colour 
indicates alrady clicked
   if (bakgnd != "" && left(bakgnd,4) != "none") {
      window.alert("This Member ALREADY Selected !  Please Try Again") ;
      return false ;
   }

   bugmsg("b. before set Focuscolor") ;
   setFocusColor(optel) ;
   bugmsg("c. After set Focuscolor") ;

   var memcode = optel.value ;    // the membess code e.g., 3174
   var memname = optel.text ;        // e.g., Joe Blow
   gholdel.value = memcode+" "+memname ;    // my 'holding cell' for the 
member

   bugmsg("d. Before plradd") ;
   plradd(memcode,memname) ;    // uses .add and scrollIntoView to Add 
player to second list
   bugmsg("e. After plradd") ;

   return true;
}

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

#15056

Hi:

    Here below is the Members <Select> element that is causing me headaches 
in Chrome:

    Again, when one 'clicks' around an  <option> near the bottom (e.g., 
value=3177), then Chrome does *not* even enter the 'onclick' function.

-Mel


**************************
<div id="imembers">
<select id="imembername" style="font-size:12px;"
   onclick="focusOnMemElement(event);"
   size="96">
<option value="X" disabled="disabled"
   style="color:white;background:red;">1. Select Members</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="3193">Bennett, Nick</option>
<option value="3106">Breault, Henri</option>
<option value="3107">Breault, Ronald</option>
<option value="3108">Buchanan, Bill</option>
<option value="3190">Buchanan, Don</option>
<option value="3109">Burly, John</option>
<option value="3110">Cathcart, Chuck</option>
<option value="3111">Cheung, William</option>
<option value="3191">Cheuny, Bill</option>
<option value="3112">Chobater, Ed.</option>
<option value="3113">Corrigan, Ed.</option>
<option value="3192">Crawford, Len</option>
<option value="3114">Cutting, Cyrl</option>
<option value="3115">Darlington, Ken</option>
<option value="3117">DeJong, Jack</option>
<option value="3116">Dean, Michael</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="3189">Haverlock, Darryl</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>
<option value="3140">Lavers, Jim</option>
<option value="3141">Lavoie, Leon</option>
<option value="3142">Leggatt, Dick</option>
<option value="3143">Lehoday, Michel</option>
<option value="3144">MacKay, Malcolm</option>
<option value="3145">MacPherson, Fred</option>
<option value="3146">Magnan, Gerry</option>
<option value="3147">Maguire, Jack</option>
<option value="3148">Mah, Bill</option>
<option value="3149">Mathieu, Rene</option>
<option value="3150">McCarthy, Doug</option>
<option value="3151">McCormack, Vern</option>
<option value="3152">McKenzie, John</option>
<option value="3153">Mead, Glenn</option>
<option value="3154">Mitchell, Norm</option>
<option value="3155">Murphy, Terry</option>
<option value="3156">Musteca, Ed.</option>
<option value="3157">Nikolai, Helmut</option>
<option value="3158">Orr, Stewart</option>
<option value="3159">Paquette, Ray</option>
<option value="3160">Parker, Dave</option>
<option value="3161">Peterson, Gordon</option>
<option value="3162">Phare, Cal</option>
<option value="3163">Poon, Henry</option>
<option value="3164">Proche, Tony</option>
<option value="3165">Pshyk, Robert</option>
<option value="3166">Rakochey, Ernie</option>
<option value="3167">Ready, Johl</option>
<option value="3168">Reddekopp, Ron</option>
<option value="3169">Rhind, Cliff</option>
<option value="3170">Ritson-Bennett, Nick</option>
<option value="3171">Savard, John</option>
<option value="3172">Savard, Pierre</option>
<option value="3173">Savard, Venant</option>
<option value="3174">Schaefenacker, Kurt</option>
<option value="3175">Schlesinger, Gerhard</option>
<option value="3176">Smith, Mel</option>
<option value="3195">Southwood, Vic</option>
<option value="3177">Stokowski, Bob</option>
<option value="3178">Stollery, Tom</option>
<option value="3179">Strong, Norman</option>
<option value="3180">Swan, Jim</option>
<option value="3181">Thillefer, Robert</option>
<option value="3194">Turner, Don</option>
<option value="3182">Vance, Hubie</option>
<option value="3183">Vincent, Georges</option>
<option value="3184">Weber, Orlan</option>
<option value="3185">Westlund, Glen</option>
<option value="3186">Wilson, Roger</option>
<option value="3187">Witten, Larry</option>
<option value="3188">Yoon, John</option>
</select>
</div>

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

#15057

On 12-07-15 10:05 AM, Mel Smith wrote:

> Again, when one 'clicks' around an  <option> near the bottom (e.g.,
> value=3177), then Chrome does *not* even enter the 'onclick' function.

Alas, you are the crazy one in this situation. Do not rely upon
the "click" event for select elements. I made this mistake as
a novice years ago, except with option elements.

David Mark posted a very informative thread[0] years ago that
should illuminate you on select elements. It is entitled
"Change is good?", and can easily be found via a search engine
if the provided link does not work.

[0]: 
news://d074123f-28f3-4e48-bc1f-c806e5f2fa20@a37g2000yqi.googlegroups.com

-- 
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada

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

#15058

Matt McDonald wrote on 15 jul 2012 in comp.lang.javascript:

> On 12-07-15 10:05 AM, Mel Smith wrote:
> 
>> Again, when one 'clicks' around an  <option> near the bottom (e.g.,
>> value=3177), then Chrome does *not* even enter the 'onclick' function.
> 
> Alas, you are the crazy one in this situation. Do not rely upon
> the "click" event for select elements. I made this mistake as
> a novice years ago, except with option elements.

Indeed.

The click could be interpreted as an action before you choose an option,
tricky crossbrowser-wize.

===========

And do not use event to find the value of the selection,
use this [and .value in the function] or this.value.

Try:

<select onchange='executeResult(this.value)'>
<option value="3101">Anderson, Harry</option>

==========

And do not disable an option but reject the result in your script:

<option value="X" selected>1. Select Members</option>

function executeResult(r) {
   if (r == 'X') return; // no action taken!
   ......


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

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

#15060

Evertjan said:
>
> Indeed.
>
> The click could be interpreted as an action before you choose an option,
> tricky crossbrowser-wize.
>
> ===========
>
> And do not use event to find the value of the selection,
> use this [and .value in the function] or this.value.
>
> Try:
>
> <select onchange='executeResult(this.value)'>
> <option value="3101">Anderson, Harry</option>
>
> ==========
>
> And do not disable an option but reject the result in your script:
>
> <option value="X" selected>1. Select Members</option>
>
> function executeResult(r) {
>   if (r == 'X') return; // no action taken!
>   ......
>
>


Evertjan:

    Thank you for the above.

    I'll put my head down and change my code to reflect what you say above.

Many thanks again !

-Mel Smith

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

#15059

Matt said:
>
>> Again, when one 'clicks' around an  <option> near the bottom (e.g.,
>> value=3177), then Chrome does *not* even enter the 'onclick' function.
>
> Alas, you are the crazy one in this situation. Do not rely upon
> the "click" event for select elements. I made this mistake as
> a novice years ago, except with option elements.
>
> David Mark posted a very informative thread[0] years ago that
> should illuminate you on select elements. It is entitled
> "Change is good?", and can easily be found via a search engine
> if the provided link does not work.
>
> [0]: 
> news://d074123f-28f3-4e48-bc1f-c806e5f2fa20@a37g2000yqi.googlegroups.com


Matt (and all):

    Thank you !

    I'll read up on this and make changes to my code !

-Mel
(the crazy one)

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

#15071

Le 15/07/12 02:04, Mel Smith a écrit :
> Hi:
>
>      For the last 4 days, I've been 'beating my head against the wall' over a
> Chrome (and maybe a Safari) JavaScript problem.
>
>      -    Essential parts of the JS part of the app are two <Select> elements
> with up to 95 <option>'s in them.
>      -    When I 'click' on an <option> of the Membership List <select>
> element, my code takes the 'text' of that <option> (i.e., the golfer's name)
> and adds it to the option list of the *other* <select> element (the Players
> List), and then the added option is immediately viewable by my use <select>
> .add method, and of the scrollIntoView method.
>      -    This works perfectly for IE and FF,
>
>      BUT,


JS :
====

function addPlayer(x) {
var f = document.forms['nameOfTheForm'],
     a = f.elements['golfers'],
     b = f.elements['players'],
     o = new Option(a.value),
     i = x.selectedIndex,
     n = b.length;
a.options[i] = a.options[+i+1];
b.options[n] = o;
b.selectedIndex = n;
f=a=b=o=i=n=null;
}

HTML :
======

<form name="nameOfTheForm">
<select name="golfers" onchange="addPlayer(this)">


tested Chrome, Safary and Firefox
-- 
Stéphane Moriaux avec/with iMac-intel

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

#15072

Stephane said:

>
> JS :
> ====
>
> function addPlayer(x) {
> var f = document.forms['nameOfTheForm'],
>     a = f.elements['golfers'],
>     b = f.elements['players'],
>     o = new Option(a.value),
>     i = x.selectedIndex,
>     n = b.length;
> a.options[i] = a.options[+i+1];
> b.options[n] = o;
> b.selectedIndex = n;
> f=a=b=o=i=n=null;
> }
>
> HTML :
> ======
>
> <form name="nameOfTheForm">
> <select name="golfers" onchange="addPlayer(this)">
>
>
> tested Chrome, Safary and Firefox


Stephane:
    Thanks for the new method, and I'll test it later, but, in my actual 
system, I do more things than just add the member to the current player's 
list: (e.g., I perhaps remove him, replace him on the Draw table, re-color 
his background, etc, etc for 1200 lines.  and I have no difficulty adding a 
player to the player's list *IF*  execution would only arrive in the 
focusOnMemElement() with the *proper* player.

This morning, I constructed a test program  which I including below.  It is 
a 'biggie' so, if anyone wants it sent to their private email as an 
attachment please let me know:

Thanks all !

-Mel Smith

****************************
<!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>Chrome Test</title>

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

div#imembers {
   position: absolute;
   width: 9em;
   top: 60px;
   left: 1em;
   height: 400px;
   margin-left: 0px;
   margin-right: 0px;
   overflow: auto;
   padding: 1px;
   background: yellow;
   border: 1px solid black;
}

div#iplayers {
   position: absolute;
   width: 9em;
   top: 60px;
   left: 12em;
   height: 400px;
   margin-left: 0px;
   margin-right: 0px;
   overflow: auto;
   padding: 1px;
   background: yellow;
   border: 1px solid black;
}

div#ihelp {
   position: absolute;
   width: 30em;
   top: 60px;
   left: 25em;
   height: 250px;
   margin-left: 0px;
   margin-right: 0px;
   overflow: auto;
   padding: 5px;
   border: 1px solid black;
}
</style>

<script type="text/javascript">
var memsel,memopts ;
var plrsel ;

function setFocusFields() {
// Set up global object for the Member <select> list and,
// the Player <select> list

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

rootid = "iplayername"
rootel = document.getElementById("iplayername") ;
plrsel = rootel
}

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 focusOnMemElement(el) {
   window.alert("a. typeof el="+typeof el) ;
   window.alert("b. el.value="+el.value) ;
   var selindex = memsel.selectedIndex ;
   var optel = memsel.options[selindex] ;
   if (optel.value == "X") {
      window.alert("Faulty Selection !  Please Try Again") ;
      return false ;
   }
   window.alert("c. selindex="+selindex+"  optel.value="+optel.value) ;
   /*  more error checks removed from here */

   setFocusColor(optel) ;

   var memcode = optel.value ;
   var memname = optel.text ;
   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 ;

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

window.alert("Player Added: " + memcode+" "+memname) ;
return true ;
}

</script>
</head>

<body onload="setFocusFields();">
<div id="imembers">
<select id="imembername" style="font-size:12px;" 
onchange="focusOnMemElement(this);" size="96">
<option value="X" style="color:white;background:red;">1. Select 
Members</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="3193">Bennett, Nick</option>
<option value="3106">Breault, Henri</option>
<option value="3107">Breault, Ronald</option>
<option value="3108">Buchanan, Bill</option>
<option value="3190">Buchanan, Don</option>
<option value="3109">Burly, John</option>
<option value="3110">Cathcart, Chuck</option>
<option value="3111">Cheung, William</option>
<option value="3191">Cheuny, Bill</option>
<option value="3112">Chobater, Ed.</option>
<option value="3113">Corrigan, Ed.</option>
<option value="3192">Crawford, Len</option>
<option value="3114">Cutting, Cyrl</option>
<option value="3115">Darlington, Ken</option>
<option value="3117">DeJong, Jack</option>
<option value="3116">Dean, Michael</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="3189">Haverlock, Darryl</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>
<option value="3140">Lavers, Jim</option>
<option value="3141">Lavoie, Leon</option>
<option value="3142">Leggatt, Dick</option>
<option value="3143">Lehoday, Michel</option>
<option value="3144">MacKay, Malcolm</option>
<option value="3145">MacPherson, Fred</option>
<option value="3146">Magnan, Gerry</option>
<option value="3147">Maguire, Jack</option>
<option value="3148">Mah, Bill</option>
<option value="3149">Mathieu, Rene</option>
<option value="3150">McCarthy, Doug</option>
<option value="3151">McCormack, Vern</option>
<option value="3152">McKenzie, John</option>
<option value="3153">Mead, Glenn</option>
<option value="3154">Mitchell, Norm</option>
<option value="3155">Murphy, Terry</option>
<option value="3156">Musteca, Ed.</option>
<option value="3157">Nikolai, Helmut</option>
<option value="3158">Orr, Stewart</option>
<option value="3159">Paquette, Ray</option>
<option value="3160">Parker, Dave</option>
<option value="3161">Peterson, Gordon</option>
<option value="3162">Phare, Cal</option>
<option value="3163">Poon, Henry</option>
<option value="3164">Proche, Tony</option>
<option value="3165">Pshyk, Robert</option>
<option value="3166">Rakochey, Ernie</option>
<option value="3167">Ready, Johl</option>
<option value="3168">Reddekopp, Ron</option>
<option value="3169">Rhind, Cliff</option>
<option value="3170">Ritson-Bennett, Nick</option>
<option value="3171">Savard, John</option>
<option value="3172">Savard, Pierre</option>
<option value="3173">Savard, Venant</option>
<option value="3174">Schaefenacker, Kurt</option>
<option value="3175">Schlesinger, Gerhard</option>
<option value="3176">Smith, Mel</option>
<option value="3195">Southwood, Vic</option>
<option value="3177">Stokowski, Bob</option>
<option value="3178">Stollery, Tom</option>
<option value="3179">Strong, Norman</option>
<option value="3180">Swan, Jim</option>
<option value="3181">Thillefer, Robert</option>
<option value="3194">Turner, Don</option>
<option value="3182">Vance, Hubie</option>
<option value="3183">Vincent, Georges</option>
<option value="3184">Weber, Orlan</option>
<option value="3185">Westlund, Glen</option>
<option value="3186">Wilson, Roger</option>
<option value="3187">Witten, Larry</option>
<option value="3188">Yoon, John</option>
</select>
</div>
<div id="iplayers">
<select id="iplayername" style="font-size:12px;overflow:scroll;" 
onchange="focusOnPlrElement(this);" size="1">
   <option value="X" style="color:white;background:red;">2. Select 
Players</option>
</select>
</div>
<div id="ihelp">
<span style="text-decoration:underline;font-weight:bold;">How to Show the 
Difference between FF/IE and Chrome/Safari:</span><br /><br />
1. Using FF or IE, select a person near the *bottom* of<br />
&nbsp;&nbsp;&nbsp;the List of Members and click on him.<br /><br />
2. Watch as that person is added to the bottom of the Player's List.<br 
/><br />
3. Try the same thing with Chrome or Safari, and watch as a<br />
&nbsp;&nbsp;&nbsp;totally *different* person is 'selected'.<br /><br />
4. How can I make Chrome, FF, IE &amp; Safari browsers work the same way ??
</div>
</body>
</html>
****************************

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

#15073

It seems this problem is not related to JS. Even if the onchange
attribute is removed, the selection doesn't work as expected in latest
Chrome.

As a workaround you might remove the definition of height from the CSS,
and use an appropriate size attribute (say 25) for the selectbox.

-- 
Christoph M. Becker

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

#15075

Christoph says:
> It seems this problem is not related to JS. Even if the onchange
> attribute is removed, the selection doesn't work as expected in latest
> Chrome.
>
> As a workaround you might remove the definition of height from the CSS,
> and use an appropriate size attribute (say 25) for the selectbox.


Christoph:

    But, the size *is* defined in the <select> box (i.e., size="96" )

    (Also, I note that I passed 'this' to the focusOnMemElement() function, 
but didn't use it -- but it made no difference ...)

Thanks for your comment !

-Mel

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

#15076

Mel Smith wrote:
> Christoph says:
>> It seems this problem is not related to JS. Even if the onchange
>> attribute is removed, the selection doesn't work as expected in latest
>> Chrome.
>>
>> As a workaround you might remove the definition of height from the CSS,
>> and use an appropriate size attribute (say 25) for the selectbox.
> 
> 
> Christoph:
> 
>     But, the size *is* defined in the <select> box (i.e., size="96" )
> 
>     (Also, I note that I passed 'this' to the focusOnMemElement() function, 
> but didn't use it -- but it made no difference ...)
> 
> Thanks for your comment !
> 
> -Mel
> 
> 
> 

Yes, the size is defined. But the resulting selectbox would be larger
than {height: 400px; overflow: hidden} allows. This seems to confuse
Chrome when an item is selected, that would be displayed more than 400px
down (if no heigh is given); so immediately after the selection, the
selectbox scrolls up, and the item, that is as far down as in the
scrolled state, is selected.

This *might* be a bug in Webkit. Anyway, it's not a JS specific problem,
so perhaps you'll get better help in another newsgroup.

-- 
Christoph M. Becker

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

#15080

Christoph said:

> Yes, the size is defined. But the resulting selectbox would be larger
> than {height: 400px; overflow: hidden} allows. This seems to confuse
> Chrome when an item is selected, that would be displayed more than 400px
> down (if no heigh is given); so immediately after the selection, the
> selectbox scrolls up, and the item, that is as far down as in the
> scrolled state, is selected.
>
> This *might* be a bug in Webkit. Anyway, it's not a JS specific problem,
> so perhaps you'll get better help in another newsgroup.


Christoph:

    Thank you for the explanation.

    I note before that I *think* that if one begins by clicking a *lower 
visible* mname, then further clicking in the bottom regions seems to work 
(but now, I'm tired and confused and don't really know)

    -- maybe, I should just give up on Chrome :)

Thanks again,

-Mel

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

#15083

Le 16/07/12 18:14, Mel Smith a écrit :
> Stephane said:
>
>>
>> JS :
>> ====
>>
>> function addPlayer(x) {
>> var f = document.forms['nameOfTheForm'],
>>      a = f.elements['golfers'],
>>      b = f.elements['players'],
>>      o = new Option(a.value),
>>      i = x.selectedIndex,
>>      n = b.length;
>> a.options[i] = a.options[+i+1];
>> b.options[n] = o;
>> b.selectedIndex = n;
>> f=a=b=o=i=n=null;
>> }
>>
>> HTML :
>> ======
>>
>> <form name="nameOfTheForm">
>> <select name="golfers" onchange="addPlayer(this)">
>>
>>
>> tested Chrome, Safari and Firefox
>
>
> Stephane:
>      Thanks for the new method, and I'll test it later, but, in my actual
> system, I do more things than just add the member to the current player's


Why not.
(but not so much for the moment)

In my example :
- the player is added in players list
- the players scrolls to the player
- the player is deleted from golfers list

(no need of global "memories" or to highlight players in golfers list)


> This morning, I constructed a test program  which I including below.

Ha! Oui! On voit bien le problème !

It's a bug in the web-kit ?

a solution : <http://cjoint.com/?BGrbOlvqKxh>
or : <http://cjoint.com/12ju/BGrbOlvqKxh_2_selects_sam.htm>
???


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

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

#15237

Hi:

    This morning I received a quick response from Roger Fong at Apple 
(roger_fong@apple.com
regarding my problem with the <select> option list

    He also provided me with a workaround while the bug is being worked on. 
I'll puzzle on that later.


Here is Roger's email response today:

*******************************************************************
Hi Mel,


I played around with for a minute and at first glance it actually looks like 
it's an issue with how the select element plays with the scroll position.
The problem only happens when you scroll all the way to the bottom. Then 
when you click on something it somehow thinks that the scroll position is 
all the way at the top and will select the element that's at the position 
you clicked on, but instead at the top of the list.
The problem doesn't happen when you say slide the slider up by one notch 
from the very bottom and select elements near the bottom.


Anyways. yeah. it looks like it's probably a WebKit bug.
I'll file a bug and take a look into it,
Thanks for letting us know!
Roger


On 07/30/12, Mel Smith <syntel@cox.net> wrote:
  Hi Roger:

     I have no way to fight my way into the webkit bugs reporting procedure 
at this time.

     I *am* a web developer who develops in IE and Firefox, and then 
cross-checks on Safari, Chrome, and Opera.

     For the past three weeks I've been fighting a <select> element problem 
that *only* surfaces on Safari (and Chrome).  It does not appear on IE, FF, 
or Opera.

     To me, the only commonality here is the webkit package.

     I have attached a simple (x)html page (named chrome.htm) that 
illustrates the problem. The instructions are on the page itself.  I have 
stripped most all non-essentials from this page.

     In summary,  I have a <select< element with *many* options (in this 
test case -- 96 options).   'Selecting' an option by 'clicking' on it 
activates an 'onchange=' javascript function.  This function simple shows 
what option you 'clicked' on.

     If I select an option *near the very bottom of the option* list (save 
the 90th one down the list), then Safara and Chrome fail to show the correct 
option, but instead show a completely unrelated option which is placed much 
earlier (i.e., lower) on the list of options. However, IE, FF, and Opera 
correctly show the selected option.

     I've been baffled by this difference for three weeks now, and my 
associates feel this is probably a webkit problem.

     Hope you can help feed this (assumed) bug into your bug list for 
resolution.

     ( I hate to tell my users to only use IE or FF because Safari (on my PC 
and on my iPad2) is important to me ! ))

  Thanks in Advance !

  Mel Smith
  <snip>

[toc] | [prev] | [standalone]

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

csiph-web