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

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22

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

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Your going to have to look into keyCodes; so that you can capture the right arrow keypress event; then attach your function to this event.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22
    I have, but it won't let me to move on the second big block to the left. If you need to take a look, 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?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22
    bump
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Originally Posted by stephen100
    It doesn't allow me to move the second and third block to the left.
    It does for me; what browser is giving you the issue? I took a look @ it in Chrome and it lets you go left and right, in all rows. The only restriction; that I saw, was the up and down movements. Your code would only allow end user to go up/down rows, if the first block (of each row); was focused on.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22
    It doesn't move the big block of the second rows to the left when I select on the third row. Can you please fix the code to allow me to move the big block to the left when I press on the right arrow button of the keyboard??

    I am using firefox. Chrome are treated the same as firefox. I cannot move big rows to the left after the second rows.
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Originally Posted by stephen100
    It doesn't move the big block of the second rows to the left when I select on the third row.
    Please try to elaborate; as I am not quit understanding what the issue is, that you are having.

    Originally Posted by stephen100
    Can you please fix the code to allow me to move the big block to the left when I press on the right arrow button of the keyboard??
    No, but I will try to assist you in fixing the issue; once you elaborate on what the exact issue is or the effect you are going for here.

    I am assuming you found this code somewhere; if so, what site did you get this from; so I can look @ what exactly this code was designed to accomplish. What it looks like is; that you are trying to create a TV guide or something, but if that's the case; you do not need to update the shows (onkeypress) until the end user reaches the end of a time slot.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22
    Look at the two big rows, if you press on the right arrow of the keyboard twice, you will see the yellow row move to the next two rows and if you try to press on the right arrow button again, it supposed to be moving the first and second rows to the left to allow me to move the third and fourth rows but it doesn't allowed me to do.

    Here is the code:

    PHP Code:
    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(rowwidth)+parseInt(currentrowleft)));
          //alert(totalwidth_current);
          //alert((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current);
          //alert(nextdivwidth);
          //alert(currentdivwidth);
          
          
    if((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current)
          {
            
    alert("test 1");
        $(
    "body").find('.rowSubPgm').each(function(index) {
        
    //var approx = rowwidth/250;
        
    $(this).find('.pgmFirstRow:first').css"margin-left""-"+(rowwidth)+"px" );
        });
        $(
    ".rows div:nth-child(3)").css"margin-left""-"+parseInt(rowleft)-70 );
          }

            
          if(
    current_row == && currentdivwidth[0] == 1311)
          {
            
    alert("row 1");
           $(
    "body").find('.rowSubPgm').each(function(index) {
        
    //var approx = rowwidth/250;
        
    $(this).find('.pgmFirstRow:first').css"margin-left""-"+(rowwidth)+"px" );
        });
        $(
    ".rows div:nth-child(3)").css"margin-left""-"+parseInt(rowleft)-70 );
          }
            
          if(
    current_row == && currentdivwidth[0] == 1311)
          {
            
    alert("row 2");
            $(
    "body").find('.rowSubPgm').each(function(index) {
        
    //var approx = rowwidth/250;
        
    $(this).find('.pgmFirstRow:first').css"margin-left""-"+(rowwidth)+"px" );
        });
        $(
    ".rows div:nth-child(3)").css"margin-left""-"+parseInt(rowleft)-70 );
          }
            
          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(3)").css"margin-left""-"+parseInt(rowleft)-70 );
        $(
    this).find('.pgmFirstRow:first').css"margin-left""-1311px" );
          }
            
          if(
    current_row == && currentdivwidth[0] == 1311)
          {
            
    alert("row 4");
            $(
    "body").find('.rowSubPgm').each(function(index) {
        
    //var approx = rowwidth/250;
        
    $(this).find('.pgmFirstRow:first').css"margin-left""-"+(rowwidth)+"px" );
        });
        $(
    ".rows div:nth-child(3)").css"margin-left""-"+parseInt(rowleft)-2622);
          }


                    
          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(3)").css"margin-left""-"+parseInt(rowleft)-70 );                
          }            
          
    current_row++;
        }
      } 

    Here's my web app link: http://testbox.elementfx.com/test.php

    I hope you will get this now and I hope you will be able to help me to fix the bugs I have got right now.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    So you are wanting the highlight indicator; to go the first cell of the next row; when the last cell of the current row, is currently highlighted and the right arrow key is pressed... correct? If that is the case; then maybe give each of the last cells (in each of the rows) a specific className (something like "end_cell"). Then (in the right arrow keyCode condition), set-up a condition (validating the className of the current highlighted cell) for your highlighter to go to the first cell of the next row; if current condition exist (if current highlighted cell's className is
    "end_cell").

IMN logo majestic logo threadwatch logo seochat tools logo