...

View Full Version : Highlight link with numeric keydown, then go link with Enter



miguelus
06-24-2006, 11:46 AM
The page shows multiple links, numbered and generated from php/mysql.

No problem in activating a link from a keydown from numbers 0-9.

But now I need that the keydown highlights the selected link (maybe changing its css style?), and when I press Enter key the page follows the selected link.

Really lost. Not enough fluent managing this interactivity in JS.


Thanks:
Miguelus

vwphillips
06-24-2006, 01:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<input id="KP" type="button" value="View Key Codes" onclick="KeyCodes();" ><br>
<script> vic=0; </script>

<a href="http://www.vicsjavascripts.org.uk/" id="Link1" >Link 1</a><br>
<a href="javascript:alert('Link 2');" id="Link2" >Link 2</a><br>
<a href="javascript:alert('Link 3');" id="Link3" >Link 3</a><br>
<a href="javascript:alert('Link 4');" id="Link4" >Link 4</a><br>
<script language="JavaScript" type="text/javascript">
<!--


function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'zxcKeyPress','keypress')

var zxcLst;

function zxcKeyPress(zxce){
var zxcchar;
if (!document.all){ zxcchar=zxce.which; }
else { zxcchar=zxce.keyCode; }
if (zxcLst){ zxcLst.style.backgroundColor='white'; }
var zxcchars=String.fromCharCode(zxcchar); ;
var zxcobj=document.getElementById('Link'+zxcchars);
if (zxcchar==13&&zxcLst){ window.top.location=zxcLst.href; }
if (zxcobj){
zxcobj.style.backgroundColor='red';
zxcLst=zxcobj;
}
else {
zxcLst=null;
}
}


//-->
</script>
</body>

</html>

miguelus
06-24-2006, 05:19 PM
mmmm… well… nothing to reply :)

Just what I needed. I'll try to understand everything while implementing in my page.


Thank you!
Miguelus



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum