title: Jquery move the rows to the left
body: <p>I have got a problem with my jquery. I am using the keyboard arrow button control to allow me to move the yellow row to each row. I can't be able to move the second and third rows to the left to allow me to see the fourth rows from the right where it have been hidden.</p>
  
  <p>Here is the current code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      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) &lt;=5)
          {
              for(var i=1; i&lt;=(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)) &lt; totalwidth_current);
                  //alert(nextdivwidth);
                  //alert(totalwidth_current);
  
                  if((parseInt(rowwidth)+parseInt(currentrowleft)) &lt; 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++;
              }
          }
      }
  
  function createDivs(numberOfDivs)
  {
    var programsNumber = 1;
    for(var i=1;i&lt;=numberOfDivs;i++)
    {
      $('.mainWrap').append('&lt;div class="row" id="row'+i+'"&gt;&lt;div id="image'+i+'" class="channelList div_'+i+'_1"&gt;&lt;/div&gt;&lt;div class="rowSubPgm"&gt;&lt;div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_2"&gt;&lt;/div&gt;&lt;div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_3"&gt;&lt;/div&gt;&lt;div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_4"&gt;&lt;/div&gt;&lt;div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_5"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="clear"&gt;&lt;/div&gt;');
    }
    $(".div_"+current_col+'_'+current_row).addClass( "yellowbg" );
  }
  
  function getSchedule($link,j)
  {
    //var widthval = 350;
    var widthval =  850;
    var parts = $link.split("/");
    var links = parts[parts.length-1];
    var programlength = 0;
  
    $.ajax({
    url:$.trim(links),
    type:'GET',
    data:'',
    success: function(data)
    {
      var $data = $(data);        
      var title1 = $data.filter("#title1").html();
      var title2 = $data.filter("#title2").html();
      var title3 = $data.filter("#title3").html();
      var title4 = $data.filter("#title4").html();
  
      var time1 = $data.filter("#time1").html();
      var time2 = $data.filter("#time2").html();
      var time3 = $data.filter("#time3").html();
      var time4 = $data.filter("#time4").html();
      var time5 = $data.filter("#time5").html();
  
      time1 = time1.split(" ");
      var time1AMPM = time1[1];
      time1 = time1[0].split(":");
      time1= time1[0]+'.'+time1[1];
      if($.trim(time1AMPM) == 'PM' &amp;&amp; time1&lt;12)
        time1 = parseFloat(time1)+12;
  
        time2 = time2.split(" ");
        var time2AMPM = time2[1];
        time2 = time2[0].split(":");
        time2= time2[0]+'.'+time2[1];
      if($.trim(time2AMPM) == 'PM' &amp;&amp; time2&lt;12)
        time2 = parseFloat(time2)+12;
  
        time3 = time3.split(" ");
        var time3AMPM = time3[1];
        time3 = time3[0].split(":");
        time3 = time3[0]+'.'+time3[1];
      if($.trim(time3AMPM) == 'PM' &amp;&amp; time3&lt;12)
        time3 = parseFloat(time3)+12;
  
        time4 = time4.split(" ");
        var time4AMPM = time4[1];
        time4 = time4[0].split(":");
        time4= time4[0]+'.'+time4[1];
      if($.trim(time4AMPM) == 'PM' &amp;&amp; time4&lt;12)
        time4 = parseFloat(time4)+12;
  
        time5 = time5.split(" ");
        var time5AMPM = time5[1];
        time5 = time5[0].split(":");
        time5= time5[0]+'.'+time5[1];
      if($.trim(time5AMPM) == 'PM' &amp;&amp; time5&lt;12)
        time5 = parseFloat(time5)+12;
  
        var difftime2time1 = (parseFloat(time2) - parseFloat(time1)).toFixed(2);
        var difftime3time2 = (parseFloat(time3) - parseFloat(time2)).toFixed(2);
        var difftime4time3 = (parseFloat(time4) - parseFloat(time3)).toFixed(2);
        var difftime5time4 = (parseFloat(time5) - parseFloat(time4)).toFixed(2);
  
        if(isNaN(difftime2time1))
        {
          difftime2time1=0;
        }
        if(isNaN(difftime3time2))
        {
      difftime3time2=0;
        }
        if(isNaN(difftime4time3))
        {
      difftime4time3=0;
        }
        if(isNaN(difftime5time4))
        {
      difftime5time4=0;
        } 
        var currenttotal = 0; 
        var firstele = ((j-1)*4)+1; // how many programme i want to output in per block
        var lastele = parseInt(firstele)+3; // how many programme i want to output AFTER the firstele
        var k = 1;
        var programlength = 0;
  
        for(;firstele &lt;= lastele;firstele++)
        {
          var nexttimedate = parseInt(k)+1;
          programlength = parseFloat(programlength) + parseFloat(eval('difftime'+nexttimedate+'time'+k));
          var a = eval('difftime'+nexttimedate+'time'+k);
          //alert(a);
  
          if(a &gt;= 0.30 &amp;&amp; a &lt;= 0.70)
          {
            $('#programe'+firstele).addClass("span0hr");
            width[j]=250;
          }
  
  
          if(a &gt;= 1.00 &amp;&amp; a &lt;= 1.29)
          {
            $('#programe'+firstele).addClass("span1hr");
            width[j]=517;
          }
  
          if(a &gt;= 1.30 &amp;&amp; a &lt;= 1.70)
          {
            $('#programe'+firstele).addClass("span1_5hr");
            width[j]=701;
          }
  
          if(a &gt;= 2.00 &amp;&amp; a &lt;= 2.29)
          {
            $('#programe'+firstele).addClass("span2hr");
            width[j]=1311;
          }
  
          if(a &gt;= 2.30 &amp;&amp; a &lt;= 2.70)
          {
            $('#programe'+firstele).addClass("span2_5hr");
            width[j]=1551;
          }
  
          if(a &gt;= 3.00 &amp;&amp; a &lt;= 3.29)
          {
            $('#programe'+firstele).addClass("span3hr");
            width[j]=2051;
          }
  
          if(a &gt;= 3.30 &amp;&amp; a &lt;= 3.58)
          {
            $('#programe'+firstele).addClass("span3_5hr");
            width[j]=2301;
          }
  
          if(a &gt;= 8.00 &amp;&amp; a &lt;= 8.58)
          {
            $('#programe'+firstele).addClass("span8hr");
            width[j]=5244;
          }
          currenttotal++;
      pgmcontent[firstele] = eval('title'+k);
      k++;        
        }
        checksum+=j;
  
        if(checksuminit == checksum)
        {
          for(var ii=1;ii&lt;width.length-1;ii++)
          {
            widthval+=width[ii];
          }
  
          for(var jj=1;jj &lt;= pgmcontent.length-1;jj++)
      {
        $('#programe'+jj).html(pgmcontent[jj]);
      }
  
      for(var kk=1;kk &lt;= imagecontent.length-1;kk++)
      {
        $('#image'+kk).html(imagecontent[kk]);
      }
      $("body").find('.rowSubPgm').each(function(index) {
      $(this).css( "width", widthval+"px");
      });
      $("div").show();    
        }
    }   
    });
  }
  </code></pre>
  
  <p>I believe that the problem are somewhere in this code:</p>
  
  <pre><code>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)) &lt; totalwidth_current);
                  //alert(nextdivwidth);
                  //alert(totalwidth_current);
  
                  if((parseInt(rowwidth)+parseInt(currentrowleft)) &lt; 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++;
              }
          }
  </code></pre>
  
  <p>Do you know how I can move the second and third rows to the left to allow me to move the fourth rows to the left from the right when I press on the keyboard right arrow button??</p>