[JQuery] Problem with keyboard control

[mark103]

Hi guys,

I'm working on the div class of blocks to control them using the keyboard up and down arrow buttons. I have the list of blocks where 7 of them are showing while the other blocks are hiding. I have text of blocks from block 1 to block 17. When I press on the down arrow button from block 1 to block 17, the blocks will move up using 'rowheight' which it looks good to go, but there is a problem. When I press on the up arrow button and the down arrow button after the block 7, the blocks supposed to stay where they are but it will move up when the yellow block is on the block 8, block 9, block 10, block 11, block 12, block 13, block 14, block 15, block 16 and block 17.

I think the problem are somewhere in this code:

if (event.keyCode == 40)
  {  //down
  if(current_col < totalrowcount && current_row == 1)
  {
  if(current_col >= displayrowcount)
  {
  var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");
  currentrowtop = parseInt(currentrowtop)-rowheight;
  var rowtop = currentrowtop+="px";
  $(".mainWrap div.row:first-child").css( "margin-top", rowtop );
  }
  current_col++;
  }
  }

In this case, when I press on the down arrow button from block 1 to block 7 and if I press on the up arrow button, the blocks will not move up where it stays on. When I press on the down arrow button after the block 7, if I press on the up arrow button and then the down arrow button, the blocks will move up. The same things that goes for other blocks. I want the blocks to move up only when I'm after the end of the block where the blocks are hiding, e.g.: I'm on the block 7 while the other blocks after the block 7 are hiding so I can move them up. I don't want to move the blocks up when I'm not the end of the block.

Does anyone know how I can block the blocks from move up when I'm not after the end of the block while the other blocks are hiding?

Here's my example site if you need to take a look: http://testbox.elementfx.com/blocks.php

[LastMitch]

Does anyone know how I can block the blocks from move up when I'm not after the end of the block while the other blocks are hiding?

@mark103

This issue you are having is not related to CSS at all.

It's a jQuery issue that containing CSS. There's a differences. CSS you can figure out in a few minutes but jQuery with CSS, you need to test it out.

The key-code fine. You didn't provide any div tags that goes with the jQuery so it's bit hard to assist you.

[mark103]

Well, what I just said that I have the list of rows with 7 blocks where the other blocks are hiding. I have 7 blocks which is showing from block 1 to block 7. When I press on the down arrow button of the keyboard, the blocks will moving up using 'rowheight' which it looks good to go, but there is a problem. When I press on the down arrow button until when the yellow block get on the end of the block, e.g.: block 11. When I press on the up arrow button quite few times, the blocks will move down without have any problem. When I try to press on the down button to get back to the block 11, the blocks supposed to stay where they are without moving up until the yellow block goes after the block 11 then move the blocks up, but the blocks will move up when I'm on the block 9. The same things it goes for other blocks.

I think the problem are somewhere in this code:

  if (event.keyCode == 38) 
  {  //up
    if(current_col > 1 && current_row == 1)
    {
      var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");   
      var calcuatedrowtop = -(current_col*rowheight);
      currentrowtop = parseInt(currentrowtop)-rowheight;

      if((currentrowtop - calcuatedrowtop) < rowheight)
      {
     currentrowtop = parseInt(currentrowtop)+rowheight;
     currentrowtop = parseInt(currentrowtop)+rowheight;
     var rowtop = currentrowtop+="px";
     $(".mainWrap div.row:first-child").css( "margin-top", rowtop );            
      }
      current_col--;
    }
  }
  else if (event.keyCode == 40) 
  {    //down
    if(current_col < totalrowcount && current_row == 1)
    {
      if(current_col >= displayrowcount)
      {
        var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");
        currentrowtop = parseInt(currentrowtop)-rowheight;
        var rowtop = currentrowtop+="px";
        $(".mainWrap div.row:first-child").css( "margin-top", rowtop );
      }
      current_col++;
    }
  }

In this case, when I press on the down arrow button from block 1 to block 7 and if I press on the up arrow button, the blocks will not move up where it stays on. When I press on the down arrow button to get on the block 9, if I press on the up arrow button few times and then the down arrow button to get back to the block 9 which it come after the block 8, the blocks will move up when I am on the middle of the blocks that I want to get to the block 9 without the blocks get moving. I want the blocks to stay where they are without get moving to allow me to get back to the block 9. The same things it goes for other blocks. I want the blocks to move up only when I'm after the end of the block beside the hiding blocks, e.g.: block 9. The block after the block 9 is the block 10 so I want to move them up when I'm on the block 10, block 11 and so on. I don't want the blocks to move up when I'm on the middle of the block even when I'm not on the end of the block.

Do you know how I can block the blocks from moving up when I'm on the middle of the block to allow me to get on to each block until the end of the block, e.g block 11 then move the block 12 up and so on?

Here's the jsfiddle if you need to take a look: http://jsfiddle.net/VZWNE/13/