DOCUMENT.LINKS[i].focus() : A DOUBT!!!... NEED HELP!! [Archive]

ajith_rock

04-13-2007, 10:54 AM

Hi!!,

I have a code in which, on a keypress i have to check if a particular link has a focus. If it does have the focus, then the next link has to be selected. HOW DO I DO THIS?... I TRIED DOING THE FOLLOWING... BUT IN VAIN!!

function load()
{

document.links[0].focus();//ON PAGE LOAD, FOCUS SET TO FIRST LINK
}

function keyNumber(ev) {//THIS TAKES IN THE KEYPRESS CODES

nmbr=ev.which?ev.keyCode:ev.which;
switch(nmbr) {

case 38://THE UP KEY ON KEYBOARD
var i=0;
while(document.links[i].hasfocus())//DOESN WORK!!!... NEED HELP!!!!
{
i++;
}
document.links[i-1].focus();
break;

case 40://THE DOWN KEY ON KEYBOARD
var i=0;
while(document.links[i].hasfocus())//I NEED HELP WITH THIS LINE!!!
{
i++;
}
document.links[i+1].focus();
break;

}
}

I dont really know what i have to use to TEST IF THE PARTICULAR LINK HAS GOT THE FOCUS!!!.... SOMETHING WHICH RETURNS A TRUE OR A FALSE ON A LINK FOCUS WOULD DO THE TRICK I GUESS!!!

THANX A LOT FOR HELPING ME OUT!!!

WAITING IMPATIENTLY FOR A SOLUTION!!!!

CHEERS,

AJITH

glenngv

04-14-2007, 10:37 PM

Why not just use browser's behavior of setting focus to next/previous element using Tab/Shift+Tab key?

ajith_rock

04-16-2007, 01:55 PM

hey glenn!,

The client want the whole site to be working using 5 keys of the keyboard man... They are UP,DOWN,RIGHT,LEFT, and ENTER, respectively. I got the logic though!!... Pasted the code i wrote below... Jus for interest sake... Keep rocking an helpin us out mate!!.... :thumbsup:

:: CODE ::

<html>
<TITLE>NEOMICROLITE :: E-MULTIPLEX</TITLE>
<head>
<style type="text/css">

</style>

<script type="text/javascript">

function load()
{

document.links[1].focus();
}

function keyNumber(ev,day) {

nmbr=ev.which?ev.keyCode:ev.which;
switch(nmbr) {
case 37:
document.links[1].focus();
break;

case 38://up

switch(day)
{

case share:
{
document.links[1].focus();
break;
}

case addons:
{
document.links[2].focus();
break;
}

case weekend:
{
document.links[3].focus();
break;
}

case yours:
{
document.links[4].focus();
break;
}

default:
ALERT("USE ONLY LEFT,RIGHT,UP,DOWN AND RETURN");
break;

}
break;

case 39:
document.links[0].focus();
break;

case 40:

switch(day)
{

case surf:
{
document.links[2].focus();
break;
}

case share:
{
document.links[3].focus();
break;
}

case addons:
{
document.links[4].focus();
break;
}

case weekend:
{
document.links[5].focus();
break;
}

default:

break;

}
break;
}
}

</script>

</head>

<BODY background="base1.jpg" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="load()" >
<div align="left">
<p align="right"><a href="../final/index.php" id="home" onkeydown="keyNumber(event,home)"><img src="home.jpg" width="90" height="35" border="0"></a></p>
<p align="center"> </p>
<p align="center"><span class="style1">E-MULTIPLEX</span><br>
</p>
<div style="padding:30px;"> <br>
<br>
<br>

<a href="surf/monday.php" id="surf" onkeydown="keyNumber(event,surf)"> <img src="surf.jpg" border=0></img></a><br>
<br>

<a href="share/share.php" id="share" onkeydown="keyNumber(event,share)"><img src="share.jpg" BORDER=0></img></a><br>
<br>

<a href="addons/addons.php" id="addons" onkeydown="keyNumber(event,addons)"><img src="choose.jpg" BORDER=0></img></a><br>
<br>

<a href="weekend/weekend.php" id="weekend" onkeydown="keyNumber(event,weekend)"><img src="weekend.jpg" BORDER=0></img></a><br>
<br>

<a href="yours/yours.php" id="yours" onkeydown="keyNumber(event,yours)"><img src="yours.jpg" width="200" height="30" border="0"></a><br>
          <br>
<br>
<br>

</div>
</div>

I might come up with lots of other doubts and questions!. Please answer them whenever you find time... :D

Cheers,

Ajith