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

    Join Date
    Nov 2006
    Posts
    167
    Rep Power
    21

    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. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    167
    Rep Power
    21
    does anyone know how to fix this??

IMN logo majestic logo threadwatch logo seochat tools logo