Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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:

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


    The problem I believe are somewhere in this code:

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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    You have contacted me by PM but I’m gonna reply here because there are more knowledgable people here that might be curious.

    The reason why nobody has replied is probably because 1) you didn’t provide any link so people can actually see what you’re talking about, and 2) you didn’t express yourself clearly enough. When you are talking about “rows” moving to the left, do you actually mean “columns”? And what exactly is the point of your application (of which you still owe us your link)?

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, my website link is: http://testbox.elementfx.com/test.php

    You will see the list of channels with programme with blocks. If you move the yellow block using with the keyboard, you will see that it will move on any big where ever you press on the keyboard arrows button. My problem is I can be able to move the yellow block to the next two big blocks where they will move to the left, but I cannot be able to move the third and fourth block to the left.

    Do you know how I can move on the second and third block to the left to allow me to see the third block and fourth block to the left using with the right arrow button of the keyboard?

    I have tried this:

    PHP Code:
    if(current_row == && currentdivwidth[0] == 1311)
          {
            
    alert("row 3");
            $(
    "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 );
          } 

    And this:

    PHP Code:
    if(current_row == && currentdivwidth[0] == 1311)
          {
            
    alert("row 3");
            $(
    ".rows div:nth-child(2)").css"margin-left""-"+parseInt(rowleft)-1311 );
          } 
    And also this:

    PHP Code:
    if(current_row == && currentdivwidth[0] == 1311)
          {
            
    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 );
          } 
    It doesn't allow me to move the second and third block to the left.

    Any idea how I can do this?

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    bump...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •