Solved

Can I give this div focus?

Posted on 2006-06-14
6
238 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

20 Experts available now in Live!

Get 1:1 Help Now