CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ishkee
ishkee

Reputation: 213

Selecting proper elements of a div by navigation keys

I have a list of images displayed on my page with multiple divs laid on top of each other.

The divs are displayed according to the button clicked.

I want to select the images using the navigation keys.

Can someone point me a direction.

Code so far - Fiddle Demo

Here the image with property 'selected' is shown with blue color. On click of arrowkeys, I want respective image should be highlighted. 

<div>
    <div id="page1" class="button">SHOW PAGE1</div>
    <div id="page2" class="button">SHOW PAGE2</div>
</div>
<div id="a1" class="container"> Page 1
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>
<div id="a2" class="container" hidden> Page 2
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>

Upvotes: 1

Views: 160

Answers (4)

charlietfl
charlietfl

Reputation: 171690

This solution has integrated page switching in it. 

var $rows = $('.myrow'),
    $cells = $('.mycell');


$(document).keydown(function (e) {

    var arrowKeys = [37, 38, 39, 40];
    var directions = ['left', 'up', 'right', 'down'];
    var arrowIndex = $.inArray(e.which, arrowKeys);
    if (arrowIndex !== -1) {
        var dir = directions[arrowIndex];
        var $currCell = $cells.filter('.selected').removeClass('selected');
        var cellIndex = $currCell.index();
        var $currRow = $currCell.parent();
        if (dir == 'up' || dir == 'down') {                
            switchRows($currRow, dir, cellIndex);
        } else {
            var $nextCell;
            if( dir=='left'){
               $nextCell= $currCell.prev().addClass('selected');
                if( !$nextCell.length){
                    switchRows($currRow, 'up', 150000);
                }
            }else{
                $nextCell= $currCell.next().addClass('selected');
                 if( !$nextCell.length){
                    switchRows($currRow, 'down',0);
                }
            }   
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    }

});

/* switches rows and toggles page visibility if next image on another page going up or down*/
function switchRows ($currRow, direction, cellIndex) {
    var $next, curRowIndex = $rows.index( $currRow);
    if (direction == 'up') {
        $next = $rows.eq(curRowIndex-1)
        $next = $next.length ? $next : $rows.last();
    } else {
       $next = $rows.eq(curRowIndex+1)
        $next = $next.length ? $next : $rows.first();
    }
    var $nextCell= $next.find('.mycell').eq(cellIndex);
    if( !$nextCell.length){
        $nextCell= $next.find('.mycell').last();
    }
    $nextCell.addClass('selected');
    $currRow.parent().hide();
    $next.parent().show();
    /* add button class change logic */
}

DEMO

Upvotes: 1

Pradeep shyam
Pradeep shyam

Reputation: 1292

Updated: Check this fiddle, http://jsfiddle.net/rYvfQ/4/

    $(document).ready(function () {
    var listItems = $(".item");
    listItems.each(function (index, value) {
        if (index % 4 == 0) {
            $(this).addClass('clear')
            // what should i do here? 
        }
    });
}); 
var el = [];
$(".pages").each(function(k,v){
    el[k] = $(this).html();
}); 
var div = $('div.mycell');
var divselected;
$(document).on('keydown',function(e) {
  var div = $('div.myrow .mycell');
    switch(e.which) {
        case 37: // left 
             if(divselected){
            divselected.removeClass('selected');
            next = divselected.prev();
            if(next.length > 0){
                divselected = next.addClass('selected');
            }else{
                divselected = div.eq(0).addClass('selected');
            }
        }else{
            divselected = div.eq(0).addClass('selected');
        }
        break;

        case 38: // up
             currentindex = $('div.myrow').find('.mycell[class*="selected"]').index()
           if(divselected){
            divselected.removeClass('selected');
           div = divselected.parent().prev().find('.mycell');

             if(div.length <= 0)
             {
                 div = divselected.parent().next().find('.mycell');
             }            
                divselected = div.eq(currentindex).addClass('selected');

        }else{

           div = $('div.mycell[class*="selected"]').parent().prev().find('.mycell')
            divselected = div.eq(currentindex).addClass('selected');

        }

        break;

        case 39: // right
             if(divselected){
            divselected.removeClass('selected');
            next = divselected.next();
            if(next.length > 0){
                divselected = next.addClass('selected');
            }else{
                divselected = div.eq(0).addClass('selected');
            }
        }else{
            divselected = div.eq(0).addClass('selected');
        }
        break;

        case 40: // down
          currentindex = $('div.myrow').find('.mycell[class*="selected"]').index()
             if(divselected){
            divselected.removeClass('selected');
           div = divselected.parent().next().find('.mycell');
             if(div.length <= 0)
             {
                 div = divselected.parent().prev().find('.mycell');
             }
                            divselected = div.eq(currentindex).addClass('selected');

        }else{

           div = $('div.mycell[class*="selected"]').parent().next().find('.mycell')
          $('div.mycell[class*="selected"]').removeClass('selected');
            divselected = div.eq(currentindex).addClass('selected');

        }
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});


$('#page1').click(function(){ 
    $(".pageslist").html(el[parseInt($(this).attr('rel'))]);
   divselected="";
});

$('#page2').click(function(){
   $(".pageslist").html(el[parseInt($(this).attr('rel'))]);
     divselected="";
});

HTML:

<div>
    <div id="page1" class="button" rel = '0'>SHOW PAGE1</div>
    <div id="page2" class="button" rel = '1'>SHOW PAGE2</div>
</div>
<div class="pageslist">
<div id="a1" class="pages"> PAGE 1
  <div class="myrow"> 
    <div class="mycell item selected"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
  <div class="myrow">
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
</div>
<div id="a2" class="pages" hidden> PAGE 2
  <div class="myrow">
    <div class="mycell item selected"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
  <div class="myrow">
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
</div>
</div>

Upvotes: 1

abhiklpm
abhiklpm

Reputation: 1653

check this fiddle. keypress is not working in fiddle. Just copy the entire script from that fiddle and paste in your page and test in browser. It will work. http://jsfiddle.net/abhiklpm/m3MK3/12/

    $(document).ready(function () {
            var listItems = $(".item");
            listItems.each(function (index, value) {
            if (index % 4 == 0) {
                $(this).addClass('clear')
                // what should i do here? 
            }
        });
        $(document).keypress(function(e) {
            switch(e.keyCode) {
                case 37: // left
                    moveLeft();
                break;

                case 38: // up
                    moveUp();
                break;

                case 39: // right
                    moveRight();
                break;

                case 40: // down
                    moveDown();
                break;

                default: return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });
        $('.item').on('click',function(){
            $('.item').removeClass('selected');
            $(this).addClass('selected');
        });    

        $('#page1').on('click', function(){
            $("#a2").hide();
            $('#a1').show();
            $('#a1 .myrow:first-child .item:first-child').addClass('selected').trigger('click');
        });

        $('#page2').on('click', function(){
           $("#a1").hide();
            $('#a2').show();
            $('#a2 .myrow:first-child .item:first-child').addClass('selected').trigger('click');
        });
        function moveRight(){
            if($('.selected').next('.item').length > 0){
                $('.selected').removeClass('selected').next('.item').addClass('selected')
            }
        }
        function moveLeft(){
            if($('.selected').prev('.item').length > 0){
                $('.selected').removeClass('selected').prev('.item').addClass('selected')
            }
        }
        function moveDown(){
            if($('.selected').parent('.myrow').next('.myrow').length > 0){   
                var index = $('.selected').index();     
                $('.selected').removeClass('selected').parent('.myrow').next('.myrow').find('.item').eq( index ).addClass('selected');
            }
        }
        function moveUp(){
            if($('.selected').parent('.myrow').prev('.myrow').length > 0){   
                var index = $('.selected').index();     
                $('.selected').removeClass('selected').parent('.myrow').prev('.myrow').find('.item').eq( index ).addClass('selected');
            }
        }
});

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You can use trigger() function for that

$(document).keydown(function(e) {
    switch(e.which) {

        case 37: // left
            $('#page1').trigger('click');
        break;

        case 38: // up
            $('#page2').trigger('click');
        break;

        case 39: // right
            $('#page2').trigger('click');
        break;

        case 40: // down
            $('#page1').trigger('click');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

demo

Upvotes: 2

Related Questions