how to move the rows to the left using with keyboard?

Discussion in 'JavaScript' started by chris0147, Jun 19, 2013.

0
  1. #1
    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:

    <!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(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++;
    }
  }
}
    PHP:

    The problem I believe are somewhere in this 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 );                
      }
    PHP:
    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
     
    chris0147, Jun 19, 2013 IP