Menu
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:
[code=php]<!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