Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight link with numeric keydown, then go link with Enter

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mmmm… well… nothing to reply

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


    Thank you!
    Miguelus


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •