Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li> 
​
</body>
</html>
 
let el=$('button');
for(var i = 1; i<=el.length; i++){
  el.eq(i-1).attr('tabindex',i);
}   
​
var li = $('li');
var liSelected;
$(window).keydown(function(e){
    
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
          
    //Focus button 
    $("button").first().focus();
          
            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');
        }
    }
});
​
$('button').on('keydown', function(event) {
  let currentTabIndex = $(this).attr('tabindex');
  let el = $('button');
​
​
//Focus on categories if at top and up is pressed
​
  switch (event.which) {
    case 37:
      currentTabIndex = parseInt(currentTabIndex) - 1;
      if (currentTabIndex == 0) {
        $("[tabindex=" + el.length + "]").focus()
      } else {
        $("[tabindex=" + currentTabIndex + "]").focus()
      }
      break;
 
    case 39:
      currentTabIndex = parseInt(currentTabIndex) + 1;
      if (currentTabIndex == el.length+1) {
        $("[tabindex=" + 1 + "]").focus()
      } else {
      $("[tabindex=" + currentTabIndex + "]").focus()
      }
      break;
  }
 
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers