Solved

Can I give this div focus?

Posted on 2006-06-14
6
244 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html border input line 7 26
How to create a table with buttons 3 31
Responsive Font Size 6 48
dynamic created check uncheck boxes 6 42
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

749 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