Hi guys,

I need your help as I has got a problem with my JavaScript. I got four rows of div with each different rows size. I can be able to move the yellow row to the right on each small row using with the keyboard right arrow button while i can be able to move the small rows to the left.

The problem I has got I can be able to move the yellow row to the big row, but I can't be able to move the big rows to the left when I press on the keyboard right arrow button.

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=1i<=(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(
yellowbg.next().position().top == yellowbg.position().top)
      {
    $(
".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
      }
      else
      {                
    
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++;
    }
  }


The problem I believe are somewhere in this code:

PHP Code:
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(
yellowbg.next().position().top == yellowbg.position().top)
      {
    $(
".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
      }
      else
      {                
    
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 );                
      } 
The big rows size I can't be able to move to the left is 501, 701, 1051 and 1553.

Does anyone know how I can move the big rows to the left using with the keyboard right arrow button??

Any advice would be much appreciated.

Thanks in advance