Javascript keyboard control problem

mark107 · June 17, 2013

Hi guys,

I have got a problem with my JavaScript. I am using the code in my PHP to allow me to use ajax and JavaScript at the same time. There is a problem with the keyboard control, I have four blocks of div with each different size. When I have all four block on per row of div, I can be able to move the yellow block to the four blocks using with the keyboard right arrow button while the four div blocks are moving to the left. When I have one of the blocks that are big while I still have four blocks, I can be able to move the yellow block to the four blocks, but I cannot be able to move the four blocks to the left.

Here is the code:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetXmlHttpObject()
{
  if(window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
  }
  else
  {
    // code for IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

var current_col = 1;
var current_row = 1;

$(document).keyup(function(event){
var yellowbg = $(".yellowbg");
var rowwidth = $(".row").css( "width").split("px");
var yellowbgdivclass = yellowbg.attr('class');
var splitclass = yellowbgdivclass.split(" ");
var getcurrentrow = splitclass[1].split("_");

var mainWraptop = $(".mainWrap").position().top;
var mainWrapheight = $(".mainWrap").height();
var rowmove=$("#rowmove").val();
//alert($(".row").length);

var displayrowcount = 6;  //is using for to hide other channels
var rowheight = 42;
var rowwidth = 1053;  //is using for how much width the row is going to display while hide the other rows
var rowwidth1 = 1303;  //is using for how much width the row is going to display while hide the other rows
var totalwidth_current = 0;
var totalwidth_current1 = 0;

if(parseInt(current_row)+parseInt(1) <=5)
{
  for(var i=1; i<=(parseInt(current_row)+parseInt(1));i++ )
  {
    var yellowbgnextdivwidth = $(".div_"+current_col+'_'+i).css( "width");
    var yellowbgnextdivwidthsplit = yellowbgnextdivwidth.split("px");
    totalwidth_current=parseInt(totalwidth_current)+parseInt(yellowbgnextdivwidthsplit[0]);
  }
}

  if (event.keyCode == 39)
  {  //right
    if (yellowbg.next().length)
    {
      var currentrowleft = $(".rowSubPgm div.pgmFirstRow:first").css( "margin-left").split("px");
      currentrowleft1 = currentrowleft[0].split("-");
      currentrowleft2 = currentrowleft[0].split("-");

      if(typeof(currentrowleft2[1])!= "undefined")
        currentrowleft = currentrowleft2[1];
      else if(typeof(currentrowleft1[1])!= "undefined")
        currentrowleft = currentrowleft1[1];
      else
        currentrowleft = currentrowleft[0];
                    
      var nextdivwidth = $(".div_"+current_col+'_'+(parseInt(current_row)+parseInt(1))).css( "width").split("px");    
                
      //alert((parseInt(rowwidth)+parseInt(currentrowleft)));
      //alert(totalwidth_current);
      //alert((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current);
      //alert(nextdivwidth);
      //alert(totalwidth_current);
      
      if((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current)
      {
    $("body").find('.rowSubPgm').each(function(index) {
    //var approx = rowwidth/250;
    $(this).find('.pgmFirstRow:first').css( "margin-left", "-"+(rowwidth)+"px" );
    });
    $(".rows div:nth-child(2)").css( "margin-left", "-"+parseInt(rowleft)-70 );
      }    
      
      if((parseInt(rowwidth)+parseInt(currentrowleft1)) < totalwidth_current)
      {
    $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
      }
      
      if((parseInt(rowwidth1)+parseInt(currentrowleft1)) > totalwidth_current)
      {
    $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
      }
            
      if(yellowbg.next().position().top == yellowbg.position().top)
      {
    $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
      }
      else
      {
        alert("5");            
    currentrowleft = parseInt(currentrowleft)+rowwidth;
    var rowleft = currentrowleft+="px";
    $("body").find('.rowSubPgm').each(function(index) {
    $(this).find('.pgmFirstRow:first').css( "margin-left", "-"+rowleft );
    });
    $(".rows div:nth-child(2)").css("margin-left", "-"+parseInt(rowleft)-70);                
      }
      current_row++;
    }
  }
}

Does anyone know how I can move the four block to the left using with the keyboard right arrow button control when I have one of the block that are big??

If you need to see my website link for better understanding, please let me know and I would be happy to send on PM.

Any advice would be much appreciated.

Thanks in advance

trq · June 17, 2013

A little of topic, but I have to ask.

I am using the code in my PHP to allow me to use ajax and JavaScript at the same time.

1) A big part of Ajax is written in Javascript so that comment makes little sense.

2) Your code doesn't actually use any Ajax either, so your comment is starting to make even less sense.

3) Why are you rolling your own Ajax implementation in GetXmlHttpObject() when jQuery already provides a perfectly capable cross browser compatible API for doing so?

Sign In

Javascript keyboard control problem

Recommended Posts

mark107

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information