Solved

Can I give this div focus?

Posted on 2006-06-14
6
248 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
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!

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

688 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