Hi guys,

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 be able to move the yellow row to the next two rows on the right side but I can't be able to move the first and second rows to the left to allow me to see the third and fourth rows from the right.

Here is the current code:

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++;
                }
            }
        }
    
    function createDivs(numberOfDivs)
    {
      var programsNumber = 1;
      for(var i=1;i<=numberOfDivs;i++)
      {
        $('.mainWrap').append('<div class="row" id="row'+i+'"><div id="image'+i+'" class="channelList div_'+i+'_1"></div><div class="rowSubPgm"><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_2"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_3"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_4"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_5"></div></div></div><div class="clear"></div>');
      }
      $(".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' && time1<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' && time2<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' && time3<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' && time4<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' && time5<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 <= 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 >= 0.30 && a <= 0.70)
            {
              $('#programe'+firstele).addClass("span0hr");
              width[j]=250;
            }
            
            
            if(a >= 1.00 && a <= 1.29)
            {
              $('#programe'+firstele).addClass("span1hr");
              width[j]=517;
            }
            
            if(a >= 1.30 && a <= 1.70)
            {
              $('#programe'+firstele).addClass("span1_5hr");
              width[j]=701;
            }
            
            if(a >= 2.00 && a <= 2.29)
            {
              $('#programe'+firstele).addClass("span2hr");
              width[j]=1311;
            }
                   
            if(a >= 2.30 && a <= 2.70)
            {
              $('#programe'+firstele).addClass("span2_5hr");
              width[j]=1551;
            }
                    
            if(a >= 3.00 && a <= 3.29)
            {
              $('#programe'+firstele).addClass("span3hr");
              width[j]=2051;
            }
            
            if(a >= 3.30 && a <= 3.58)
            {
              $('#programe'+firstele).addClass("span3_5hr");
              width[j]=2301;
            }
            
            if(a >= 8.00 && a <= 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<width.length-1;ii++)
            {
              widthval+=width[ii];
            }
    	  
            for(var jj=1;jj <= pgmcontent.length-1;jj++)
    	{
    	  $('#programe'+jj).html(pgmcontent[jj]);
    	}
    	  
    	for(var kk=1;kk <= imagecontent.length-1;kk++)
    	{
    	  $('#image'+kk).html(imagecontent[kk]);
    	}
    	$("body").find('.rowSubPgm').each(function(index) {
    	$(this).css( "width", widthval+"px");
    	});
    	$("div").show();	
          }
      }   
      });
    }

I believe that the problem are somewhere in this code:

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)) < 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++;
                }
            }


Do you know how I can move the first and second rows to the left to allow me to move the third and fourth rows to the left from the right when I press on the keyboard right arrow button??

My web app link is: http://testbox.elementfx.com/test.php


Any advice would be much appreicated.

Thanks in advance.