SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting Dropdown Focus

    Hi,
    I have 'n' long select boxes of items that appear on a page. Depending on a users settings, one of those items may be selected in each of 10 boxes when they get to the page.

    I have a onfocus and onchange events handlers(JavaScript) on these drop down lists. In onFocus event handler I sort the options. In onchange event handler I remove the currently selcted option from n-1 remaining drop downs and add the previously selected item to n-1 remaining drop downs.

    These functions are working perfectly in IE.

    But in mozilla, when I click on the drop down, the displayed dropdown doesn't scroll down to the selected item instead it displays the list from first option (even though the selcted item is highlighted when we scroll down).

    In firefox, the same problem occurs and one more problem is that when we click the on the drop down the selected item is not shown in the box (even though the selcted item is highlighted when we scroll down).

    The problem is, the selected item looses focus when we click on the drop down. What I have to do, is focus the list of items so that the selected item is at the top of the select box with the scroll bar set appropriately on the drop down. As an example, if you have a list of 30 items, and only 7 can show at a time, and the 20th item is selected, I would like it (#20) to be at the top(or at least it is visible) of the select box, with the scroll bar set appropriately on the drop down.

    <code>
    function onChange(menu,start,end){

    if(!lockUI)
    {
    lockUI = true;
    var LoopLimit = end+1;
    var CurrSelectedValue = parseInt(menu.options[menu.selectedIndex].value);

    for (var i=start; i<LoopLimit; i++)
    {
    var name="sel"+i;
    var Id = document.getElementById(name);

    if (Id.name != menu.name)
    {
    if (prevSelectedValue != -1)
    {
    //add the old selected value to the options array
    Id.options[Id.options.length] = new Option(prevSelectedValue,prevSelectedValue);
    }
    else
    {
    //to avoid flickering we have written this code. This piece is a scrap.
    Id.options[Id.options.length] = new Option(prevSelectedValue,prevSelectedValue);
    for (var k=0; k<Id.options.length; k++)
    {
    if (Id.options[k].text == -1 )
    {
    Id.options[k] = null;
    break;
    }
    }
    }

    if (CurrSelectedValue != -1)
    {
    //delete new value selected from options array
    for (var j=0; j<Id.options.length; j++)
    {
    if (Id.options[j].value == CurrSelectedValue )
    {
    Id.options[j] = null;
    break;
    }
    }
    }
    }
    }
    prevSelectedValue = menu.options[menu.selectedIndex].value;
    lockUI = false;
    }
    }

    function onFocus(menu)
    {
    if(!lockUI)
    {
    lockUI = true;
    prevSelectedValue = menu.options[menu.selectedIndex].value;
    sortOptions(menu);
    lockUI = false;
    }
    }

    function sortOptions(menu)
    {
    //sort the options array
    var sortArray = new Array();
    for (var k=0; k<(menu.options.length-1); k++)
    {
    sortArray[k] = menu.options[k+1].value;
    }
    sortArray.sort(function(a,b) { return (a - b); });

    for (var x=0; x<sortArray.length; x++)
    {
    menu.options[x+1].value = sortArray[x];
    menu.options[x+1].text = sortArray[x];
    menu.options[x+1].selected = (sortArray[x] == prevSelectedValue);
    }
    }
    </code>
    Can you please suggest how to focus on the selected item in drop down in Mozilla and Firefox browsers?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please provide example of a select

    to define parameters of onChange(menu,start,end)

    and where var name is defined

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re:Setting DropDown focus

    The sample html looks like the following:
    <select id="sel0" name="sel0" size="1" onfocus="onFocus(this)" , onchange="onChange(this,0,9)">
    <option value="-1">-- None --</option>

    <option value="1" >1</option>

    <option value="2" >2</option>

    <option value="3" >3</option>

    <option value="4" >4</option>

    <option value="5" >5</option>

    <option value="6" >6</option>

    <option value="7" >7</option>

    <option value="8" >8</option>

    <option value="9" >9</option>

    <option value="10" >10</option>

    <option value="11" >11</option>

    <option value="12" >12</option>

    <option value="13" >13</option>

    <option value="14" >14</option>

    <option value="15" >15</option>

    <option value="16" selected="selected">16</option>
    </select>
    <select id="sel1" name="sel1" size="1" onfocus="onFocus(this)" , onchange="onChange(this,0,9)">
    <option value="-1">-- None --</option>

    <option value="1" >1</option>

    <option value="2" >2</option>

    <option value="3" >3</option>

    <option value="4" >4</option>

    <option value="5" >5</option>

    <option value="6" >6</option>

    <option value="7" >7</option>

    <option value="8" >8</option>

    <option value="9" >9</option>

    <option value="10" >10</option>

    <option value="11" >11</option>

    <option value="12" >12</option>

    <option value="13" >13</option>

    <option value="14" >14</option>

    <option value="15" selected="selected">15</option>

    <option value="16" >16</option>
    </select>
    .
    ..
    ....
    <select id="sel9" name="sel9" size="1" onfocus="onFocus(this)" , onchange="onChange(this,0,9)">
    <option value="-1">-- None --</option>

    <option value="1" >1</option>

    <option value="2" >2</option>

    <option value="3" >3</option>

    <option value="4" >4</option>

    <option value="5" >5</option>

    <option value="6" >6</option>

    <option value="7" >7</option>

    <option value="8" >8</option>

    <option value="9" >9</option>

    <option value="10" >10</option>

    <option value="11" >11</option>

    <option value="12" >12</option>

    <option value="13" selected="selected">13</option>

    <option value="14" >14</option>

    <option value="15" >15</option>

    <option value="16" >16</option>
    </select>

    In onchange event, the variable menu is a drop down object. The start and end variables gives details abt no of drop downs on that page. The first drop down menu name is like "sel"+start, second one is "sel"+(start+1)...

    I hope above explanation is clear.

    Thanks
    Kamesh

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in IE the selected index is at top of list in FF at bottom

    is this a problem

    as alway could not understand your posted code but thik sorting on focus is going to loose the selected index

    so did this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="InitSel('fred');">
    <a id="fred" >
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    </a>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (23-Jan-2006) http://www.vicsjavascripts.org.uk
    
    // DRAFT
    
    function InitSel(id){
     var zxcp=document.getElementById(id);
     zxcp.ary=[];
     var zxcsels=zxcp.getElementsByTagName('SELECT');
     for (zxc0=0;zxc0<zxcsels.length;zxc0++){
    // next 5 lines only required to populate selects
      zxcsels[zxc0].options[0]=new Option('Select','',true,true);
      for (zxc1=1;zxc1<50;zxc1++){
       zxcsels[zxc0].options[zxc1]=new Option(zxcFormatNu(zxc1),zxcFormatNu(zxc1),true,true);
      }
      zxcsels[zxc0].selectedIndex=zxc0+23;
    //
      zxcsels[zxc0].onfocus=function(){ zxcFocus(this); }
      zxcsels[zxc0].onchange=function(){ zxcChange(this); }
      zxcsels[zxc0].ary=zxcp.ary;
      zxcp.ary.push(zxcsels[zxc0]);
      zxcsels[zxc0].last=null;
     }
    }
    
    function zxcFormatNu(zxcnu){
     if (zxcnu<10){ zxcnu='0'+zxcnu; }
     return zxcnu;
    }
    
    
    function zxcFocus(obj){
    }
    
    function zxcChange(zxcobj){
     for (zxc0A=0;zxc0A<zxcobj.ary.length;zxc0A++){
      zxcobj.ary[zxc0A].si=zxcobj.ary[zxc0A].options[zxcobj.ary[zxc0A].selectedIndex].text
     }
     for (zxc0=0;zxc0<zxcobj.ary.length;zxc0++){
      if (zxcobj.ary[zxc0]!=zxcobj){
       zxcFill(zxcobj.ary[zxc0],zxcobj.si);
      }
     }
     if (zxcobj.last&&zxcobj.last!=zxcobj.options[zxcobj.selectedIndex]){
      for (zxc0=0;zxc0<zxcobj.ary.length;zxc0++){
       if (zxcobj.ary[zxc0]!=zxcobj){
        zxcobj.ary[zxc0].options[zxcobj.ary[zxc0].options.length]=new Option(zxcobj.last.text,zxcobj.last.value,true,true);
       }
      }
     }
     zxcobj.last=zxcobj.options[zxcobj.selectedIndex];
     for (zxc0A=0;zxc0A<zxcobj.ary.length;zxc0A++){
      zxcFill(zxcobj.ary[zxc0A],null);
      for (zxc1=1;zxc1<zxcobj.ary[zxc0A].options.length;zxc1++){
       if (zxcobj.ary[zxc0A].options[zxc1].text==zxcobj.ary[zxc0A].si){
        zxcobj.ary[zxc0A].selectedIndex=zxc1;
       }
      }
     }
    }
    
    function zxcFill(zxcary,zxcm){
     zxcoptions=zxcOptionAry(zxcary);
     zxcoption=zxcoptions.sort(zxcSortOptions);
     zxcary.options.length=1;
     for (zxc1=0;zxc1<zxcoptions.length;zxc1++){
      if (zxcoptions[zxc1].text!=zxcm){
       zxcary.options[zxcary.options.length]=new Option(zxcoptions[zxc1].text,zxcoptions[zxc1].value,true,true);
      }
     }
    }
    
    function zxcOptionAry(zxcary){
     zxcoptions=[];
     for (zxc1B=1;zxc1B<zxcary.options.length;zxc1B++){
      zxcoptions.push(zxcary.options[zxc1B]);
     }
     return zxcoptions
    }
    
    function zxcSortOptions(zxca,zxcb){
     var zxcA=zxca.text;
     var zxcB=zxcb.text;
     if (zxcA<zxcB){ return -1; }
     if (zxcA>zxcB){ return +1; }
     return 0;
    }
    
    //-->
    </script>
    
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •