Hi guys,

I need some help with my jQuery script. I have four rows on the right side where the other rows are hidden. I am trying to figure out how to resize on per row if the size is 517px or whatever it is when I press on the right arrow of the keyboard.

Using with this code:

PHP Code:
    var current_col 1;
    var 
current_row 1;
    
    $(
document).ready(function() 
    {
      $(
"div").hide();
      $(
".div_"+current_col+'_'+current_row).addClass"yellowbg" );
      
getAllChannels();
    });
    
    var 
totalrowcount 8;  //is using for how many channels row I have in total 
    
    
$(document).keyup(function(event)
    {
      var 
yellowbg = $(".yellowbg");
      var 
rowwidth1 = $(".row").css"width").split("px");
      
//alert($(".row").length);
    
      
var displayrowcount 6;  //is using for to hide other channels
      
var rowheight 42;
      var 
rowwidth 267;  //is using for how much width the row is going to display while hide the other rows
      
var rowwidth1 1068;  //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");
          var 
currentdivwidth yellowbg.css"width").split("px");
     
          
//alert((parseInt(rowwidth1)+parseInt(currentrowleft)));
          //alert(totalwidth_current);
          //alert((parseInt(rowwidth1)+parseInt(currentrowleft)) < totalwidth_current);
          //alert(nextdivwidth);
          //alert(currentdivwidth);
          
          
if(current_row == && currentdivwidth[0] == 1311)
          {
            
alert("row 1");
            $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );
          }
          
            
          if(
current_row == && currentdivwidth[0] == 1311)
          {
            
alert("row 2");
            $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );;
          }
          
          if(
current_row == && currentdivwidth[0] == 517)
          {
            
alert("***");
            $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );
            
            
width[j]=250.1;
          }  
          else if(
current_row == && currentdivwidth[0] == 1311)
          {
            
alert("row 3");
            $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );
          }
            
          if(
current_row == && currentdivwidth[0] == 1311)
          {
            
alert("row 4");
            $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );
          }
    
    
                    
          if(
yellowbg.next().position().top == yellowbg.position().top)
          {
        $(
".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
          }
          else
          {                
        
currentrowleft parseInt(currentrowleft)+rowwidth1;
        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++;
        }
      }
    
    
width = new Array();
    
imagecontent = new Array();
    
pgmcontent = new Array();
    
    var 
checksuminit 0;
    var 
checksum 0;
    function 
getAllChannels()
    {
      var 
i=0;
      $.
ajax({
      
url:'get-listing.php',
      
type:'POST',
      
data:'',
      
success: function(result)
      {
        var 
$doc = $(result);
        
i=1;
        
$doc.filter('p#channels').each(function(index) {imagecontent[i] = $(this).html();i++;});
        
createDivs(i-1);
        
totalrowcount i-1;
      
        var 
j=1;
        
$doc.filter('#links').each(function(index) {
        var 
$link = $(this).html();
        
$link1 $link.replace("&amp;""&"); 
        if($.
trim($link1) !='')
        {
          
checksuminit+=j;
          
getSchedule($link1,j);
        }
        
j++;
        });
      }
     });
    }
    
    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(":");
        
time1time1[0]+'.'+time1[1];
        if($.
trim(time1AMPM) == 'PM' && time1<12)
          
time1 parseFloat(time1)+12;
                
          
time2 time2.split(" ");
          var 
time2AMPM time2[1];
          
time2 time2[0].split(":");
          
time2time2[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(":");
          
time4time4[0]+'.'+time4[1];
        if($.
trim(time4AMPM) == 'PM' && time4<12)
          
time4 parseFloat(time4)+12;
        
          
time5 time5.split(" ");
          var 
time5AMPM time5[1];
          
time5 time5[0].split(":");
          
time5time5[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 1;
          var 
programlength 0;
          
          for(;
firstele <= lastele;firstele++)
          {
            var 
nexttimedate parseInt(k)+1;
            var 
programlength = eval('difftime'+nexttimedate+'time'+k);
            
//alert(a);
            
            
if(programlength >= 0.30 && programlength <= 0.70)
            {
              $(
'#programe'+firstele).addClass("span0hr");
              
width[j]=250;
            }
            
            
            if(
programlength >= 1.00 && programlength <= 1.29)
            {
              $(
'#programe'+firstele).addClass("span1hr");
              
width[j]=517;
            }
            
            if(
programlength >= 1.30 && programlength <= 1.70)
            {
              $(
'#programe'+firstele).addClass("span1_5hr");
              
width[j]=701;
            }
            
            if(
programlength >= 2.00 && programlength <= 2.29)
            {
              $(
'#programe'+firstele).addClass("span2hr");
              
width[j]=1051;
            }
                   
            if(
programlength >= 2.30 && programlength <= 2.70)
            {
              $(
'#programe'+firstele).addClass("span2_5hr");
              
width[j]=1251;
            }
                    
            if(
programlength >= 3.00 && programlength <= 3.29)
            {
              $(
'#programe'+firstele).addClass("span3hr");
              
width[j]=1585;
            }
            
            if(
programlength >= 3.30 && programlength <= 3.70)
            {
              $(
'#programe'+firstele).addClass("span3_5hr");
              
width[j]=1835;
            }
            
            if(
programlength >= 4.00 && programlength <= 4.29)
            {
              $(
'#programe'+firstele).addClass("span4hr");
              
width[j]=2085;
            }
            
            if(
programlength >= 4.30 && programlength <= 4.70)
            {
              $(
'#programe'+firstele).addClass("span4_5hr");
              
width[j]=2335;
            }
            
            if(
programlength >= 5.00 && programlength <= 5.29)
            {
              $(
'#programe'+firstele).addClass("span5hr");
              
width[j]=2585;
            }
            
            if(
programlength >= 5.30 && programlength <= 5.70)
            {
              $(
'#programe'+firstele).addClass("span5_5hr");
              
width[j]=2835;
            }
            
            if(
programlength >= 8.00 && programlength <= 8.29)
            {
              $(
'#programe'+firstele).addClass("span8hr");
              
width[j]=4919;
            }
            
            if(
programlength >= 8.30 && programlength <= 8.70)
            {
              $(
'#programe'+firstele).addClass("span8hr");
              
width[j]=5169;
            }
            
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();    
          }
      }   
      });
    }
    
    <
style type="text/css"
    .
margin-35margin-top:-35px;}
    .
yellowbg{background-color:#f9a600 !important;}
    
body {background:url('/images/blue_background_by_creativebluediamond.jpg'no-repeat center center fixed #0d55a9;font-family:Arial;}
    
.row{  height37px;overflowhiddenwidth18632pxmargin:5px}
    .
channelListwidth:250pxfloat:leftborder:1px solid #CCCCCC; height:30px; padding-left:5px; padding-top:5px; background-color:#1e34a1; font-size:19px; color:#FFFFFF; font-weight:bold; margin-right:10px;position: relative; z-index:10;}
    
.pgmFirstRowwidth:250pxfloat:leftborder:1px solid #CCCCCC;height:30px; font-size:19px; color:#FFFFFF; font-weight:bold; margin-right:10px;padding-left:5px; padding-top:5px;line-height: 27px;overflow:hidden; background:#1E34A1;}
    
.span1hrwidth:517px !important;}
    .
span1hrimpwidth:517px !important;}
    .
span1_5hrwidth:701px !important;}
    .
span2hrwidth:1051px !important;}
    .
span2_5hrwidth:1251px !important;}
    .
span3hrwidth:1585px !important;}
    .
span3_5hrwidth:1835px !important;}
    .
span4hrwidth:2085px !important;}
    .
span4_5hrwidth:2335px !important;}
    .
span5hrwidth:2585px !important;}
    .
span5_5hrwidth:2835px !important;}
    .
span8hrwidth:4919px !important;}
    .
span0hrwidth:250px !important;}
    .
clearclear:both;}
    .
mainWrapheight:256pxoverflow:hiddenwidth:1330px;}
    .
rowSubPgmwidth:2318px;} // using for hide the channels between the channels and end of programme
    
</style

I have tried this:

PHP Code:
    if(current_row == && currentdivwidth[0] == 517)
    {
      $(
'.rowSubPgm').css"margin-left""-"+(rowwidth)+"px" );
      
width[j]=250.1;
    } 

It won't let me to resize the rows.

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

What I want you to do is to move the yellow row to the right using with the keyboard right arrow button. When you get to the row called "Gilmore Girls", you will see the row beside the "Gilmore Girls" that have not been resize it. And there are other rows below that I want to resize it.

I don't know how I can change the size of rows from 517px to change it to 250.1px or whatever it is for per row.

Does anyone know how i can resize on per row if the size is 701px or whatever it is?

Thanks in advance