CODEWITHSUNDEEP
javascriptjqueryhtml
jp remar serrano
jp remar serrano

Reputation: 61

Navigation using up and down arrow doesn't work

I want to navigate a list in my html using only the up and down arrow keys. I found many solutions and try this http://jsfiddle.net/mkamithkumar/kgEwT/1/ and yet it doesn't work

I also try this code in http://jsfiddle.net/Vtn5Y/ and arrow keys doesn't work to navigate.

Here is my code:

<html>
<head>
    <link href="jquery/jquery-ui.css" rel="stylesheet">
    <script rel="stylesheet" type="text/css">
    li.selected {background:yellow}
    </script>
    <script src="jquery-3.1.0.js"></script>
</head>

<body>
    <script >
    var li = $('li');
    var liSelected;
    $(window).keydown(function(e){
        if(e.which === 40){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.next();
                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.eq(0).addClass('selected');
                }
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else if(e.which === 38){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.last().addClass('selected');
                }
            }else{
                liSelected = li.last().addClass('selected');
            }
        }
    });
    </script>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Upvotes: 1

Views: 185

Answers (1)

user2544565
user2544565

Reputation:

try like this - http://pastebin.com/J0wHL5j3

<html>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
    li.selected {background:yellow}
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <script>
    $(document).ready(function(){
    var li = $('li');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){

        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = $(li).first().addClass('selected');
            }
        }else{
            liSelected = $(li).first().addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
});
});
    </script>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

The only two things i have done is to add your code in document.ready statement. Also i am not 100% sure, but i haven't seen

<script rel="stylesheet" type="text/css">

It's more likely to use 

<style type="text/css">

After doing those two things locally it seems to be working fine.

Upvotes: 1

Related Questions