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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navigate a webpage with arrow keys using JAVASCRIPT

    Hello,
    I'm developping a javascript library.
    I need to enable the user to run through a menu using arrow keys. The menu is a set of div elements and by pressing on left or right key the next div (button) is selected. I know how to detect events and identify which key is pressed by document.onkeydown etc but i can't make the selection go from an element to the next one. I can only use javaScript no JQuery.
    That is my code for now :
    [CODE]
    <html>
    <head>
    <script>

    function down(id) {var et =document.getElementById(id);
    document.onkeydown = checkKey;


    function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') { et.style.webkitTransform="scale(1.2)";
    et.style.backgroundColor="#BDBDBD";
    pp.style.color= "white";

    }


    }

    }

    function up(id) {document.onkeyup = checKey;
    var elt =document.getElementById(id);
    function checKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') { elt.style.webkitTransform="scale(1)";
    elt.style.backgroundColor= "#424242";
    pp.style.color="white";
    // up arrow
    }


    } }

    function arrierePlan(emplacementImage) {
    document.body.style.backgroundImage="url(" + emplacementImage+ ")";
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.webkitBackgroundSize="cover";
    }

    function menuHorizontal(buttonColor , textSize){

    create("1","msg1",buttonColor , textSize);
    create("2","msg2",buttonColor , textSize);
    create("3","msg3",buttonColor , textSize);
    create("4","msg4",buttonColor , textSize);
    create("5","msg5",buttonColor , textSize);
    create("6","msg6",buttonColor , textSize);
    down('1');
    up('1');
    }





    function create(id,buttonText , buttonColor , textSize)
    {

    elt = document.createElement("span");
    var pp= texte(buttonText , textSize);
    elt.appendChild(pp);
    elt.id+= id;
    elt.tabindex = 0;
    elt.style.backgroundColor += buttonColor;
    elt.style.mozBorderRadius="10px";
    elt.style.webkitBorderRadius="10px";
    elt.style.bordeRadius="10px";
    elt.style.boxShadow="8px 8px 12px #aaa,0px 2px 2px 0px rgba(0, 0, 0, 0.5),0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset";
    elt.style.float="left";
    elt.style.width= "200px";
    elt.style.height= "60px";
    elt.style.display= "block";
    //elt.style.position="fixed";
    elt.style.borderStyle= "none";
    elt.style.borderWidth= "0px";
    elt.style.marginTop="15px";
    elt.style.marginLeft="50px";
    elt.style.webkitTransitionDuration="0.5s";
    elt.style.webkitTransitionTimingFunction="ease-out";
    document.body.appendChild(elt);

    div = document.createElement("div");
    div.innerHTML = 'bonjourr';
    div.style.backgroundColor= "#F8E0E0";
    div.style.backgroundColor= "#F8E0E0";
    div.style.width= "100px";
    div.style.height= "100px";
    div.style.display= "block";
    div.style.height= "100px";
    div.style.borderStyle= "solid";
    div.style.borderWidth= "1px";


    // down('1');
    // up('1');


    // move(elt);
    }

    function move(elt)
    {
    elt.onmouseover = function() {

    elt.style.webkitTransform="scale(1.2)";
    elt.style.backgroundColor="#BDBDBD";
    pp.style.color= "white";}

    elt.onmouseout = function() {
    elt.style.webkitTransform="scale(1)";
    elt.style.backgroundColor= "#424242";
    pp.style.color="white";}
    }


    function texte(buttonText, size)
    {
    var txt = document.createTextNode(buttonText);

    var pp = document.createElement("p");
    pp.id="iid";
    pp.style.fontSize+= size;
    pp.style.textAlign="center";
    pp.style.textShadow="0 1px 0 #ccc,05 0 2px 0 #c9c9c9,06 0 3px 0 #bbb,07 0 4px 0 #b9b9b9,08 0 5px 0 #aaa,09 0 6px 1px rgba(0,0,0,.1),10 0 0 5px rgba(0,0,0,.1),11 0 1px 3px rgba(0,0,0,.3),12 0 3px 5px rgba(0,0,0,.2),13 0 5px 10px rgba(0,0,0,.25),14 0 10px 10px rgba(0,0,0,.2),15 0 20px 20px rgba(0,0,0,.15)";
    pp.style.color="white";
    pp.style.marginTop="9px";
    //pp.style.marginTop="20px";
    pp.appendChild(txt);
    return pp;

    }

    function show_hide(action,elementid) {
    element=document.getElementById(elementid);
    if(action=='show') {
    element.style.display='block';
    }
    else if(action='hide') {
    element.style.display='none';
    }
    }




    </script>
    </head>

    <body>
    <script>arrierePlan("./js/plan.jpg"); menuHorizontal('#424242','25'); ev(); </script>
    </body>
    </html>

    in the function down() when I try to increment the id and recall the function in this way:
    id = id + 1;
    down(id) ;
    it doesn't work.

    Can any body help me please? All codes I found use JQuery .

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,253
    Thanks
    12
    Thanked 341 Times in 337 Posts
    there’s a missing closing brace on the down function. and a couple of other typos.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

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