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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    keyboard control problem

    Hi guys,

    I have got a problem with my JavaScript. I am using the code in my PHP to allow me to use ajax and JavaScript at the same time. There is a problem with the keyboard control, I have four blocks of div with each different size. When I have all four block on per row of div, I can be able to move the yellow block to the four blocks using with the keyboard right arrow button while the four div blocks are moving to the left. When I have one of the blocks that are big while I still have four blocks, I can be able to move the yellow block to the four blocks, but I cannot be able to move the four blocks to the left.


    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((parseInt(rowwidth)+parseInt(currentrowleft1)) < totalwidth_current)
          {
        $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
          }
          
          if((parseInt(rowwidth1)+parseInt(currentrowleft1)) > totalwidth_current)
          {
        $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
          }
                
          if(yellowbg.next().position().top == yellowbg.position().top)
          {
        $(".div_"+current_col+'_'+current_row).css( "margin-left", "-"+rowleft );
          }
          else
          {
            alert("5");            
        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++;
        }
      }


    Does anyone know how I can move the four block to the left using with the keyboard right arrow button control when I have one of the block that are big??

    If you need to see my website link for better understanding, please let me know and I would be happy to send on PM.

    Any advice would be much appreciated.

    Thanks in advance

  • #2
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    does anyone know how to fix this??

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Could you create a simplified example on jsfiddle.net or jsbin.com and post its URL?

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes sure, can i ask you some questions?

    How I can find out what type of code on each of them what they are?

    e.g:
    PHP Code:
    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;


    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;


    PHP Code:
    $(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=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");    
                    
          
    //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((
    parseInt(rowwidth)+parseInt(currentrowleft1)) < totalwidth_current)
          {
        $(
    ".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
          }
          
          if((
    parseInt(rowwidth1)+parseInt(currentrowleft1)) > totalwidth_current)
          {
        $(
    ".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
          }
                
          if(
    yellowbg.next().position().top == yellowbg.position().top)
          {
        $(
    ".div_"+current_col+'_'+current_row).css"margin-left""-"+rowleft );
          }
          else
          {
            
    alert("5");            
        
    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++;
        }
      }


  • #5
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i have sent you a PM with my script, can you please reply??


  •  

    Posting Permissions

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