#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    21

    How to resize on per row?


    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
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    If you edit your "get-listing.php" file; where instead of having multiple instances of elements with the exact same "id" attribute (which, by the way; I would think, if you have multiple instances of elements with the exact same id attribute; your going to have conflicts); you would change the "id" attribute to the "class" attribute and set the CSS, for those classes, to have a max-width. I would think; this would be the easiest way to accomplish this.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    21
    There are nothing has got to do with the "get-listing.php", but it has got something to do with my original script. However, I have fixed the issue to resize the rows using with the element name but i can't be able to find out how to find the element to match with the correct row size.

    I'm using this code with each different elements class at the end, e.g:

    class="pgmFirstRow div_'+i+'_2 row2, class="pgmFirstRow div_'+i+'_3 row3...etc.

    PHP Code:
    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 row1"></div><div class="rowSubPgm"><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_2 row2"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_3 row3"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_4 row4"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_5 row5"></div></div></div><div class="clear"></div>');
      }
      $(
    ".div_"+current_col+'_'+current_row).addClass"yellowbg" );

    I have tried this:

    PHP Code:
      if(current_row == && currentdivwidth[0] == 517)
      {
        
    alert("change the row size 517px");

        $(
    'div').each(function(e)
        {
          if(
    parseInt($('div').eq(e).width()) == 517)
          {
            
    document.getElementsByClassName('row2'); 
            for(var 
    i=0;i<e.length;i++)
            {
              
    e[i].setAttribute('style',"width : 250.1px !important;");
            }
          }
        });
      } 

    They will find the element name called "row2" and it will resize all of these rows. What I want to achieve is to find the element name called "row2" to match with correct row size before resize it to the size I actually want.

    Do you know how i can find the element name to match with the row size?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by stephen100
    There are nothing has got to do with the "get-listing.php"
    Well for what I was suggesting (using max-width with elements with a specific class); it does have something to do with that file. Plus according to W3C standards; you are not supposed to have two or more elements, with the exact same "id" attribute (id attributes should be unique) and somewhere along the way; your code is probably going to have an issue with this. And... even, if it doesn't; giving multiple elements, the exact same "id" attribute; is non-valid html mark-up.

    Originally Posted by stephen100
    They will find the element name called "row2" and it will resize all of these rows. What I want to achieve is to find the element name called "row2" to match with correct row size before resize it to the size I actually want.

    Do you know how i can find the element name to match with the row size?
    Why would you do this; when you can just set the max-width of all of your DIV elements? All you would need to do; is anticipate how many listing; you would be showing in one row and decide how long you want your over-all page width to display and then divide that by how many listings you are displaying in one row (give or take body margin/padding). That would give you the max-width for your DIV elements. I just think, this is something that can be achieved with CSS, instead of over complicating it with JS.

IMN logo majestic logo threadwatch logo seochat tools logo