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:

PHP 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