Can I give this div focus?


shaggy_the_sheep developed this nice piece of code for me pasted below.  It is a mock datagrid, made of a div with multiple tables.  The only problem I have with it, is that I can't get to the "listbox" div without using the mouse.  Only when I click into the Listbox can scroll up and down using the keyboard.

JUST COPY THE FOLLOWING CODE TO SEE WHAT I MEAN.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Table Based Select Box</title>
<script language="javascript" type="text/javascript">
var curSelect = '';
var focused = false;
var typeSearch = '';

var options = new Array();

//MUST BE IN THE ORDER YOU WANT THEM TO APPEAR IN SELECT BOX
options[0] = new Array();
options[1] = new Array();
options[2] = new Array();
options[3] = new Array();

/*
options[x][0] is the value you want to assign your select option
options[x][1] is the second piece of data to be shown in the grid
options[x][2] is the third piece of data that will be show
*/

options[0][0] = 'hello';
options[0][1] = 'Information One';
options[0][2] = 'Date One';
options[1][0] = 'bye';
options[1][1] = 'Information Two';
options[1][2] = 'Date Two';
options[2][0] = 'how';
options[2][1] = 'Information Three';
options[2][2] = 'Date Three';
options[3][0] = 'are';
options[3][1] = 'Information Four';
options[3][2] = 'Date Four';

function select(id,fromType){
if(curSelect!=''){
      document.getElementById(curSelect).style.backgroundColor = '';
      document.getElementById(curSelect + '_table').style.color = '';
      }
if(id!=curSelect||fromType==true){
      document.getElementById(id).style.backgroundColor = 'blue';
      document.getElementById(id + '_table').style.color = 'white';
      curSelect = id;
     }
else{
      curSelect = '';
     }
document.getElementById('listValue').value = curSelect;
}
function keyDetect(e){
     var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
     var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode
     var foundit = false;
     var newIndex;
     if(focused==true){
          if(unicode==38){
               for(var x in options){
                    if(options[x][0]==curSelect&&foundit==false){
                         foundit=true;
                         newIndex = parseInt(parseInt(x) - 1);
                         }
                    }
               if(newIndex>-1){
                    select(options[newIndex][0],false)
                    }
               }
          if(unicode==40){
               for(var x in options){
                    if(options[x][0]==curSelect&&foundit==false){
                         foundit=true;
                         newIndex = parseInt(parseInt(x) + 1);
                         }
                    }
               if(newIndex<options.length){
                    select(options[newIndex][0],false)
                    }
               }
          typeSearch = typeSearch + String.fromCharCode(unicode);
          }
     var foundit = false;
     var length = typeSearch.length
     if(length>0){
          for(var x in options){
            try{
               if(options[x][0].substring(0,parseInt(length)).toUpperCase()==typeSearch.toUpperCase()&&foundit==false){
                 if(document.getElementById(options[x][0])!=null){
                      foundit=true
                    select(options[x][0],true);
                    }
                 }
               }
                 catch(err){
                      }
            }
          if(foundit==false){
               typeSearch = typeSearch.substring(0,typeSearch.length-1)
               }
          }
}
function addField()
{
for(var x in options){
     document.getElementById('listBox').innerHTML = document.getElementById('listBox').innerHTML + '<div id="' + options[x][0] + '" style="cursor: pointer" onclick="select(this.id)"><table id="' + options[x][0] + '_table" width="100%" border="0" style="font-size: 7pt"><tr><td width="33%">' + options[x][0] + '</td><td width="33%">' + options[x][1] + '</td><td width="33%">' + options[x][2] + '</td></tr></table></div>'
     }
}
document.onkeydown = keyDetect
</script>
</head>

<body onload="addField()" onclick="typeSearch=''; focused=false">
<div id="listBox" style="width: 300px; height: 120px; overflow: auto; border: inset; font-family: verdana; font-size: 8pt" onclick="setTimeout('focused = true',10)">

</div>
<input type="button" value="Check Selected Value" onclick="alert(curSelect + '\n' + typeSearch)">
<input type="text" id="listValue"> This is where the value from your listbox will be stored.
<p>Click in select box and enter characters to search for item. Highlight automatically jumps to
it.</p>
<p>Use arrow keys to move up and down within select box.</p>
<p>Clicking outside of the select box 'De-focuses the list'.</p>
</body>

</html>
LVL 5
TertioptusAsked:
Who is Participating?
 
geordie007Connect With a Mentor Commented:

"That did work, but I thought that a generic solution for this would solve my problem."

Tertioptus, that is a generic solution. all it does is selects the first item of the box that you had. i had no idea you were going to change all the code. you dropped any reference, in the code that you squirt in the box, to id's that finish with "_table", but if you look at the rest of the code that shaggy_the_sheep supplied, there are references to those id's. that's why your script now won't work as it can't find those id's.

if i get time i'll re-do the whole thing, but i think you'll find it a lot easier to do if you just re-do your strHTML to reflect the original structure of shaggy_the_sheep's code (you can still change it, but make sure you reflect the original id's).
0
 
geordie007Commented:

i've edited the addField() function. if you replace the original function with the following, it should work ok:

function addField()
{
var t = 0;
for(var x in options){
     document.getElementById('listBox').innerHTML = document.getElementById('listBox').innerHTML + '<div id="' + options[x][0] + '" style="cursor: pointer" onclick="select(this.id)"><table id="' + options[x][0] + '_table" width="100%" border="0" style="font-size: 7pt"><tr><td width="33%">' + options[x][0] + '</td><td width="33%">' + options[x][1] + '</td><td width="33%">' + options[x][2] + '</td></tr></table></div>'
             if(t==0){
                  select(options[x][0]);
                  document.getElementById(options[x][0]+"_table").focus();
                  focused = true;
             }
             t++;
       }

}


cheers
geordie007
0
 
TertioptusAuthor Commented:
That did work, but I thought that a generic solution for this would solve my problem.
When I tried to add your code to mine it didn't work.

Here is how I modified his code (two modified functions below):

function addField()
{
      var strHTML =  '<table id="header_table" width="100%" border="0" style="font-size: 7pt">'
       +'<tr tabindex="1" id="header" style="cursor: pointer; font-size: 7pt" onclick="select(this.id)">'
       + '<th>col 1</th>'
       + '<th>col 2</th>'
       + '<th>col 3</th>'
       + '</tr>';
      
      for(var x in options)
      {
             strHTML = strHTML + '<tr id="' + options[x][0] + '" ';
             
             if(options[x][0] == 0)
                  strHTML = strHTML + ' tabindex=0 ';
             
             strHTML = strHTML + ' style="cursor: pointer" onclick="select(this.id)"><td style="width:10px">'  + options[x][0] + '</td>'

                        + '<td style="width:30px">' + options[x][0] + '</td>'
                        + '<td style="width:30px">' + options[x][1] + '</td>'
                        + '<td style="width:30px">' + options[x][2] + '</td>'
            + '</tr>';
     }

       document.getElementById('listBox').innerHTML = document.getElementById('listBox').innerHTML + strHTML  + '</tr></table>';
}


function select(id,fromType){
if(curSelect!=''){
      document.getElementById(curSelect).style.backgroundColor = '';
      document.getElementById(curSelect).style.color = '';
      }
if(id!=curSelect||fromType==true){
      document.getElementById(id).style.backgroundColor = 'blue';
      document.getElementById(id).style.color = 'white';
      curSelect = id;
     }
else{
      curSelect = '';
     }
document.getElementById('listValue').value = curSelect;
}
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
TertioptusAuthor Commented:
This is my function with your code.  For some reason the values don't even load into the box.

function addField()
{
      var strHTML =  '<table id="header_table" width="100%" border="0" style="font-size: 7pt">'
       +'<tr tabindex="1" id="header" style="cursor: pointer; font-size: 7pt" onclick="select(this.id)">'
       + '<th>col 1</th>'
       + '<th>col 2</th>'
       + '<th>col 3</th>'
       + '</tr>';
      
      var t = 0;
      for(var x in options)
      {
             strHTML = strHTML + '<tr id="' + options[x][0] + '" ';
             
             if(options[x][0] == 0)
                  strHTML = strHTML + ' tabindex=0 ';
             
             strHTML = strHTML + ' style="cursor: pointer" onclick="select(this.id)"><td style="width:10px">'  + options[x][0] + '</td>'

                        + '<td style="width:30px">' + options[x][0] + '</td>'
                        + '<td style="width:30px">' + options[x][1] + '</td>'
                        + '<td style="width:30px">' + options[x][2] + '</td>'
            + '</tr>';
            
           if(t==0){
               select("'" + options[x][0] + "'");
               document.getElementById(options[x][0]).focus();
               focused = true;
           }
           t++;      
            t++;
     }

       document.getElementById('listBox').innerHTML = document.getElementById('listBox').innerHTML + strHTML  + '</tr></table>';
}
0
 
TertioptusAuthor Commented:
BTW, I sent you his code because I thought that the addition would suffice for mine as well.  My code works fine.  So in trying to get help, I wanted to avoid having to take out all my server side code so someone could test it. I ended up having to do it anyway, because your solution didn't directly work in my code.
0
 
TertioptusAuthor Commented:
nevermind, I tried something else and got it to work.

thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.