8 Replies - 369 Views - Last Post: 19 June 2013 - 09:40 PM

#1 mark103  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 22
  • Joined: 13-April 08

cant move the rows to the left using with keyboard

Posted 19 June 2013 - 07:12 PM

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:

<!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:

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

Is This A Good Question/Topic? 0
  • +

Replies To: cant move the rows to the left using with keyboard

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 07:56 PM

I am having trouble understanding what it is you are having a problem with.

Quote

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.

can you explain this more?
Was This Post Helpful? 0
  • +
  • -

#3 mark103  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 22
  • Joined: 13-April 08

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:00 PM

i have sent you a pm with the link of my website.

Hope you get this what I really mean.

Thanks.

P.S Sorry for my bad English.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:17 PM

Please use the forum to request help.
More people can see it.
others can benefit from the help later.
Was This Post Helpful? 0
  • +
  • -

#5 mark103  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 22
  • Joined: 13-April 08

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:19 PM

I am using the RIGHT FORUM. Please see your PM i have sent you the link of my website for you to take a look. I hope you get it what i am trying to achieve??
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:24 PM

Using your link http://testbox.elementfx.com/test.php I was unable to reproduce the problem you are talking about.
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:30 PM

View Postmark103, on 20 June 2013 - 04:19 AM, said:

I am using the RIGHT FORUM. Please see your PM i have sent you the link of my website for you to take a look. I hope you get it what i am trying to achieve??


I was not saying you are using the WRONG forum to post I was saying to not PM for help. PM is used for a personal conversation and this is a help forum, we like others to be able to see the problem and solutions so we don't have to keep helping with the same problems.

Now, your site was working fine for me on google chrome, what browser are you using for testing?
Was This Post Helpful? 0
  • +
  • -

#8 mark103  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 22
  • Joined: 13-April 08

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:36 PM

firefox and google chrome. Both should work fine. I'm just having an issue with the Javascript. I got four blocks with each different size. I can be able to move the yellow block 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. I cant be able to move the big blocks to the left when i press on the right arrow button of the keyboard when the yellow blocks is on the second block to the third block.

Something got to do with this 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 );                
      } 



any idea?
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 403
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: cant move the rows to the left using with keyboard

Posted 19 June 2013 - 09:40 PM

Maybe someone else can reproduce the problem you are having. I am able to do all the things you are describing with no errors or troubles.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1