Solved

Can I give this div focus?

Posted on 2006-06-14
6
239 Views
Last Modified: 2008-01-09

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>
0
Comment
Question by:Tertioptus
  • 4
  • 2
6 Comments
 
LVL 7

Expert Comment

by:geordie007
ID: 16903418

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
 
LVL 5

Author Comment

by:Tertioptus
ID: 16903781
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
 
LVL 5

Author Comment

by:Tertioptus
ID: 16903812
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 7

Accepted Solution

by:
geordie007 earned 500 total points
ID: 16904329

"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
 
LVL 5

Author Comment

by:Tertioptus
ID: 16904557
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
 
LVL 5

Author Comment

by:Tertioptus
ID: 16905184
nevermind, I tried something else and got it to work.

thank you.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now