The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Focus to an item from the getElementsByName() object, Not able to give the focus to one item in the object in javascript.
Rating  5
renu
post May 21 2008, 04:37 AM
Post #1





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



Hi,

I am using the following javascript code to list down the values and to give focus to the selected value.



function selectKey(event){

var accountObj = document.getElementById('accountDropDown');
if(accountObj.style.display==''){
var code;
var character;
if (event.keyCode) code = event.keyCode;
else if (event.which) code = event.which;
character = String.fromCharCode(code);
if (code == 96) character = "0"; // 0
if (code == 97) character = "1"; // 1
if (code == 98) character = "2"; // 2
if (code == 99) character = "3"; // 3
if (code == 100) character = "4"; // 4
if (code == 101) character = "5"; // 5
if (code == 102) character = "6"; // 6
if (code == 103) character = "7"; // 7
if (code == 104) character = "8"; // 8
if (code == 105) character = "9";
var rows = document.getElementsByName('cMenuRow');
//rows[0].focus();
var found = false;
var selFound = false;
for(var i=0;i<rows.length;i++){
try
{
if(!selFound)
{
if(rows[i].className == "TopHover")
{
if((rows[i].innerHTML.trim().indexOf(character)==0) )
{
if(i<1)
{
rows[i+1].className = 'TopHover';
}
else
{
rows[i].className = "TopClass";
rows[i+1].className = "TopHover";
rows[i+1].focus();
}
selFound = true;
found = true;
return;
}
else
{
selFound = false;
found = false;
//return;
}
}
else
{
selFound = false;
}
}

}catch(e){alert(e);}
}
if(!selFound && !found)
{
for(var i=0;i<rows.length;i++){
try
{
if((rows[i].innerHTML.trim().indexOf(character)==0) && !found)
{
rows[i].className = 'TopHover';
rows[i].focus();
found = true;
}
else{
rows[i].className = 'TopClass';
}
}catch(e){alert(e);}
}
}
}
}


This code might be very tricky.
But the problem with this code is this is working properly in IE.But it is not working in Mozilla FireFox browser.

Here I am using rows[i+1].focus() to give the focus to that row.But this is not working in Mozilla.

Please someone help me out from this problem. sad.gif

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 21 2008, 09:10 AM
Post #2





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



No one is there to resolve my issue????????? sad.gif

QUOTE(renu @ May 21 2008, 04:37 AM) *

Hi,

I am using the following javascript code to list down the values and to give focus to the selected value.



function selectKey(event){

var accountObj = document.getElementById('accountDropDown');
if(accountObj.style.display==''){
var code;
var character;
if (event.keyCode) code = event.keyCode;
else if (event.which) code = event.which;
character = String.fromCharCode(code);
if (code == 96) character = "0"; // 0
if (code == 97) character = "1"; // 1
if (code == 98) character = "2"; // 2
if (code == 99) character = "3"; // 3
if (code == 100) character = "4"; // 4
if (code == 101) character = "5"; // 5
if (code == 102) character = "6"; // 6
if (code == 103) character = "7"; // 7
if (code == 104) character = "8"; // 8
if (code == 105) character = "9";
var rows = document.getElementsByName('cMenuRow');
//rows[0].focus();
var found = false;
var selFound = false;
for(var i=0;i<rows.length;i++){
try
{
if(!selFound)
{
if(rows[i].className == "TopHover")
{
if((rows[i].innerHTML.trim().indexOf(character)==0) )
{
if(i<1)
{
rows[i+1].className = 'TopHover';
}
else
{
rows[i].className = "TopClass";
rows[i+1].className = "TopHover";
rows[i+1].focus();
}
selFound = true;
found = true;
return;
}
else
{
selFound = false;
found = false;
//return;
}
}
else
{
selFound = false;
}
}

}catch(e){alert(e);}
}
if(!selFound && !found)
{
for(var i=0;i<rows.length;i++){
try
{
if((rows[i].innerHTML.trim().indexOf(character)==0) && !found)
{
rows[i].className = 'TopHover';
rows[i].focus();
found = true;
}
else{
rows[i].className = 'TopClass';
}
}catch(e){alert(e);}
}
}
}
}


This code might be very tricky.
But the problem with this code is this is working properly in IE.But it is not working in Mozilla FireFox browser.

Here I am using rows[i+1].focus() to give the focus to that row.But this is not working in Mozilla.

Please someone help me out from this problem. sad.gif

Thanks.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 21 2008, 10:52 AM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,345
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Can you provide the URL (address) of a document that demonstrates the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 21 2008, 11:52 PM
Post #4





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



QUOTE(Darin McGrew @ May 21 2008, 10:52 AM) *

Can you provide the URL (address) of a document that demonstrates the problem?

I am unable to give the URL address.I can give you the sample HTML code.

<html onkeydown="selectKey(event)">
<head>
<style>
.TopClass {
border-color:#D3D3D3;
border-style:None;
}

.TopHover {
background:#BFC8D6;
cursor:Default;
}
</style>
<script type="text/javascript">
function obj_getLeftPos(inputObj){
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}
function obj_getTopPos(inputObj){

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
}
function selectKey(event){
var accountObj = document.getElementById('accountDropDown');
if(accountObj.style.display==''){
var code;
if (event.keyCode) code = event.keyCode;
else if (event.which) code = event.which;
var character = String.fromCharCode(code);
//Start Logic
var rows = document.getElementsByName('cMenuRow');
var found = false;
//alert(rows);
//alert(rows.length);
for(var i=0;i<rows.length;i++){
try{
//alert(rows[i].innerHTML.trim());
//alert(rows[i].innerHTML.trim().indexOf(character)==0);
if((rows[i].innerHTML.trim().indexOf(character)==0) && !found){
rows[i].className = 'TopHover';
//rows[i].focus();
document.getElementById('cMenuRow').focus();
document.getElementsByName('cMenuRow')[i].focus();
//document.getElementsByName('cMenuRow').scrollDown=150;
document.getElementById("cMenuRow").scrollTop = 40;
alert(document.getElementsByName('cMenuRow')[i].value);
found = true;
}else{
rows[i].className = 'TopClass';
}
}catch(e){alert(e);}
}
}
}
function showCMenu(rowNumber){
var accountObj = document.getElementById('accountDropDown');
var positinObj = document.getElementById(rowNumber);
var Box_offsetX = 100;
var Box_offsetY = 0;
if(!accountObj){
return;
}else{
var flag = false;
accountObj.style.display="";
if((obj_getLeftPos(positinObj) + Box_offsetX - 236) < 0 ){
accountObj.style.left = '5px';
flag = true;
}else{
accountObj.style.left = (obj_getLeftPos(positinObj) + Box_offsetX - 236) + 'px';
}
if(flag){
accountObj.style.top = (obj_getTopPos(positinObj) + positinObj.offsetHeight + Box_offsetY - 3) + 'px';
}else{
accountObj.style.top = (obj_getTopPos(positinObj) + positinObj.offsetHeight + Box_offsetY) + 'px';
}
}
//Event.add(window, 'onkeydown', selectKey());
//document.body.onkeydown = selectKey;

}
function selectAccount(value){
document.getElementById("txtAccount").value = value;
hideCMenu();
//window.detachEvent("onkeydown", selectKey());
//document.body.removeEventListener('onkeydown',selectKey(),false);
//document.body.onkeydown = null;
return;
}
function hideCMenu(){
var accountObj = document.getElementById('accountDropDown');

if(!accountObj)
return;
accountObj.style.display="none";
}
</script>
</head>
<body>
Drop down test:
<br/>
<input type="text" id="txtAccount" readonly="true" /><input type="button" name="downBtn" value="select" onclick="showCMenu('txtAccount')"/>
<div id='accountDropDown' class="DiveDropMenuList"
style='position: absolute; z-index: 12000; display: none; background-repeat: repeat-y; height:50px; overflow-x:hidden;overflow:auto; width:400px;'
>
<table border='1' cellpadding='2' cellspacing='0' class="mnuSiteGroupIsland" style='background-repeat: repeat-y; border-width: 0'>
<tr>
<td style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass">
Choose Account
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('One');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
One
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Two');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Two
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Three');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Three
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Four');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Four
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Five');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Five
</td>
</tr>
</table>
</div>
</body>
</html>


If we execute this code in Internet explorer,ITs giving the focus to the selected element.If we press "T" it will give the focus to "Two".

But in mozilla this is creating the problem.The focus is not working.

Can you please spend some time in this and can you help me???? sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 22 2008, 05:32 AM
Post #5





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



please someone help me?????????
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 22 2008, 05:58 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



So exactly in what why doesn't it work? As far as I can see I get the same resukt in FF and IE.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 22 2008, 06:03 AM
Post #7





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



If we press the key "T",the row with the value"Two" is getting the focus in IE.But in FF,the focus is still on the value "One".Have you opened the code that i have sent???????

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 22 2008, 06:14 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



Wasn't that obvious from my previous post? tongue.gif

So sorry, but your instructions wasn't all that clear. The keyboard thing works for me in FF as long as the item is visible, but I guess the point is it shouldn't be necessary? Both browsers also throw an error when I press one of the keys you use: "Undefined".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 22 2008, 06:21 AM
Post #9





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



Hi,please try this code.

I will tell you the details exactly.

1. open the code with IE.

2.Click on select button

3.Press Key "O",It will highlight the row "One".

4.Press Key "F",it will highlight the row "Four"

If you open the same file in Mozilla/Firefox,If you press "O" it will highlight "One"But if you press "F",it will not show the value"Four".Instead it will be showing the value "One" in the list.(Not in the text field).


<html onkeydown="selectKey(event)">
<head>
<style>
.TopClass {
border-color:#D3D3D3;
border-style:None;
}

.TopHover {
background:#BFC8D6;
cursor:Default;
}
</style>
<script type="text/javascript">
function obj_getLeftPos(inputObj){
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}
function obj_getTopPos(inputObj){

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
}
function selectKey(event){
var accountObj = document.getElementById('accountDropDown');
if(accountObj.style.display==''){
var code;
if (event.keyCode) code = event.keyCode;
else if (event.which) code = event.which;
var character = String.fromCharCode(code);
//Start Logic
var rows = document.getElementsByName('cMenuRow');
var found = false;

for(var i=0;i<rows.length;i++){
try{

if((rows[i].innerHTML.trim().indexOf(character)==0) && !found){
rows[i].className = 'TopHover';
document.getElementsByName('cMenuRow')[i].focus();
found = true;
}else{
rows[i].className = 'TopClass';
}
}catch(e){alert(e);}
}
}
}
function showCMenu(rowNumber){
var accountObj = document.getElementById('accountDropDown');
var positinObj = document.getElementById(rowNumber);
var Box_offsetX = 100;
var Box_offsetY = 0;
if(!accountObj){
return;
}else{
var flag = false;
accountObj.style.display="";
if((obj_getLeftPos(positinObj) + Box_offsetX - 236) < 0 ){
accountObj.style.left = '5px';
flag = true;
}else{
accountObj.style.left = (obj_getLeftPos(positinObj) + Box_offsetX - 236) + 'px';
}
if(flag){
accountObj.style.top = (obj_getTopPos(positinObj) + positinObj.offsetHeight + Box_offsetY - 3) + 'px';
}else{
accountObj.style.top = (obj_getTopPos(positinObj) + positinObj.offsetHeight + Box_offsetY) + 'px';
}
}
//Event.add(window, 'onkeydown', selectKey());
//document.body.onkeydown = selectKey;

}
function selectAccount(value){
document.getElementById("txtAccount").value = value;
hideCMenu();
//window.detachEvent("onkeydown", selectKey());
//document.body.removeEventListener('onkeydown',selectKey(),false);
//document.body.onkeydown = null;
return;
}
function hideCMenu(){
var accountObj = document.getElementById('accountDropDown');

if(!accountObj)
return;
accountObj.style.display="none";
}
</script>
</head>
<body>
Drop down test:
<br/>
<input type="text" id="txtAccount" readonly="true" /><input type="button" name="downBtn" value="select" onclick="showCMenu('txtAccount')"/>
<div id='accountDropDown' class="DiveDropMenuList"
style='position: absolute; z-index: 12000; display: none; background-repeat: repeat-y; height:50px; overflow-x:hidden;overflow:auto; width:400px;'
>
<table border='1' cellpadding='2' cellspacing='0' class="mnuSiteGroupIsland" style='background-repeat: repeat-y; border-width: 0'>
<tr>
<td style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass">
Choose Account
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('One');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
One
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Two');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Two
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Three');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Three
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Four');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Four
</td>
</tr>
<tr>
<td id="cMenuRow" name="cMenuRow" onclick="selectAccount('Five');return false;"
style="margin-top:2;margin-left:10px;padding-right:15px;"
class="TopClass"
onmouseover="this.className='TopHover'"
onmouseout="this.className='TopClass'">
Five
</td>
</tr>
</table>
</div>
</body>
</html>




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 22 2008, 06:32 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



Isn't that the same code? It works the same anyway. It only works in FF if you scroll down first so the item that should be selected is visible.

Don't think I can help with this.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
renu
post May 22 2008, 06:40 AM
Post #11





Group: Members
Posts: 7
Joined: 21-May 08
Member No.: 5,712



Yes.In FF if we scrolldown then only the selected item is vivsible.But in IE without scrolling we can see the selected item.

Anyway Thanks for your kind reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd August 2021 - 05:11 AM