CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2419831
user2419831

Reputation: 181

Select the element in the bottom of other elements with down arrow key in jQuery

I am able to move focus of an element from right to left and vice versa, using the right and left arrow key.

However, I also want to know how to select the element above or below them. I know that jQuery has next() and prev() functions, but how to focus on the ones above and below?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>


    <h1 >First</h1><h2>Second</h2>
    <button class="move">something</button>
    <button class="move">Third</button>
    <h1 >Another</h1>
    <h3 >Five</h3>
    <button class="move">another button</button>

    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

.js

$(".move:first").focus();
$(document).keydown(
    function(e)
    {    
        if (e.keyCode == 39) {      
            $(".move:focus").next().focus();
        }

        if (e.keyCode == 37) {      
            $(".move:focus").prev().focus();
        }

        if (e.keyCode == 38) {      
        }

        if (e.keyCode == 40) {      
        }
    }
);

Upvotes: 0

Views: 522

Answers (1)

Alireza Kavian
Alireza Kavian

Reputation: 383

actually you can't straightly change focus between the buttons vertically with jQuery functions .

but you can use nextAll() and prevAll() functions to catch all the next or previous elements to access the bellow or top buttons.

then, you can pass the below (or upside) button to the intended condition ('if' statement) to change the focus on it.

for example in this part of code:

if (e.keyCode == 40) { //down arrow key
       if (elementPrevOfNextButton != null){
           if (bottomButton != null){
                bottomButton.focus();
            }
        }
 }

which, bottomButton is the "bellow button element" that is initialized in other part of code.

in the body of the inner 'if' statement, the focus is shifted to the intended button.


HERE is the completed code: http://cssdeck.com/labs/collab/ibftenb4/0

HERE is the completed code in snippet:

$(function () {
    $(".move:first").focus();
    $(document).keydown(
        function(e)
        {

            //// definitions for the right(i.e. next) elements (consists of buttons or other elements)
            var nextElement = $(".move:focus").next(); //the next element (whatever)
            var nextButton = $(".move:focus").nextAll('.move')[0]; //the first button after the other elements
            var elementPrevOfNextButton = null; //the element in the previous of the 'first next button'
            var allNextElements = $(".move:focus").nextAll();


            var prevElement = $(".move:focus").prev(); //the previous element (whatever)
            var prevButton = $(".move:focus").prevAll('.move')[0]; //the first button in previous of the other elements
            var elementNextOfPrevButton = null; //the element in the next of the 'first previous button'
            var allPrevElements = $(".move:focus").prevAll();

            ////variable to get the first button element in the bottom lines
            var bottomButton = null;

            ////variable to get the first button element in the upside lines
            var topButton = null;

            ////the first loop: to catch the below button element
            var i=0;
            for (; i<allNextElements.length; i++){
                if(allNextElements[i].tagName!= "BUTTON"){
                    elementPrevOfNextButton = allNextElements[i];
                    bottomButton = $(elementPrevOfNextButton).nextAll('.move')[0];
                    break;
                }
            }

            ////the second loop: to catch the upside button element
            i=0;
            for (; i<allPrevElements.length; i++){
                if(allPrevElements[i].tagName!= "BUTTON"){
                    elementNextOfPrevButton = allPrevElements[i];
                    topButton = $(elementNextOfPrevButton).prevAll('.move')[0];
                    break;
                }
            }

            if (e.keyCode == 39) { //right arrow key
                if(nextElement.prop("tagName") != "BUTTON"){
                    if(nextButton != null){
                        nextButton.focus();
                    }
                }
                else{
                    nextElement.focus();
                }
            }

            if (e.keyCode == 37) { //left arrow key
                    if (prevElement.prop("tagName") != "BUTTON") {
                        if (prevButton != null) {
                            prevButton.focus();
                        }
                    }
                    else {
                        prevElement.focus();
                    }
            }

            if (e.keyCode == 38) { //up arrow key
                if (elementNextOfPrevButton != null){
                    if (topButton != null){
                        topButton.focus();
                    }
                }
            }

            if (e.keyCode == 40) { //down arrow key
                if (elementPrevOfNextButton != null){
                    if (bottomButton != null){
                        bottomButton.focus();
                    }
                }

            }
        }
    );
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button class="move">first</button>
    <button class="move">second</button>
    <h1>hey</h1>
    <button class="move">third</button>
    <button class="move">fourth</button>
    <div><p>------------------------</p></div>
    <button class="move">5</button>
    <button class="move">6</button>
    <h1>how are you doing?</h1>
    <button class="move">7</button>
    <button class="move">8</button>


    <script src="js1.js"></script>
</body>
</html>

Upvotes: 2

Related Questions