Not getting offsetParent of obj...

RIRedinPA · December 22, 2009

I'm trying to get the x/y of an obj on the screen but a check of obj.offsetParent is returning false...not sure what I am doing wrong here.

PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>Hastings | v1.0</title>

	<!--CSS Link-->
	<link rel="stylesheet" href="css/hastings.css" type="text/css" media="screen" />

	<script language="javascript" src="js/hastings.js"></script>
</head>
<body>


<div id="map">
	<?php

		$mapcode = "";
		for($r=0; $r<15; $r++) { 
			$mapcode .= "<ul>";
			for($c=0; $c<15; $c++) { 
				$mapcode .= "<li id=\"grid" . $r . $c . "\"><img src=\"images/liborder.png\"></li>";
			}
			$mapcode .= "</ul>";
		}

	print $mapcode; 

	?>

<div>
<div id="pikeb"><a href="javascript:void(0);" onmousedown="selectitem('pikeb');"><img src="images/pikeb.png" border="0"></a></div>
	</body>
</html>

JS Code:


//globals

var objarray= new Array(); 

document.onkeyup = KeyCheck;

function selectitem(obj) { 
objarray[0] = obj;
}

function KeyCheck(e) {
var thiskey = (window.event) ? event.keyCode : e.keyCode;

switch(thiskey) { 
	case 38 :
		moveup(); 
		break;
	case 87 :
		moveup(); 
		break;  
	case 40 : 
		movedown();
		break; 
	case 83 : 
		movedown();
		break; 
	case 37 : 
		moveleft();
		break; 
	case 65 : 
		moveleft();
		break; 
	case 39 : 
		moveright();
		break;
	case 68 : 
		moveright();
		break; 
}
} 

function moveup() { 

obj = objarray[0];

if (document.getElementById(obj)) {
	//get current position of obj

	var xypos = findPos(obj);
} else { 
	alert("You must select a unit to move.");
}
}

/*SUBS*/

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
	do {
		curleft += obj.offsetLeft;
		curtop += obj.offsetTop;
	} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}

CSS (if that helps)

[code]

* {
margin: 0;
border: 0;
padding: 0;
}

/*containers*/

#map { 
position: absolute; 
top: 30px;
left: 40px;
border: 1px solid black;
width: 600px;
height: 600px;
}

#map ul { 
white-space:nowrap;
list-style-type:none;
width: 600px;
height: 40px;
}

#map li { 
display: inline; 
width: 40px;
height: 40px;
}

#pikeb {
position: absolute; 
top: 40px;
left: 0px;
z-index: 2;
}

[/code]

[attachment deleted by admin]

RIRedinPA · December 23, 2009

The problem is with the function findpos(obj)...the obj is getting passed to the function but if(obj.offsetParent) is returning false...

any help would be appreciated

KevinM1 · December 23, 2009

Well, you're not actually passing around objects. Rather, you're passing around strings. selectitem() is given an id of a HTML element, which is stored in an array (for reasons unknown, as you don't actually use the array for array-like purposes.). You don't actually obtain the object by the id. You merely pull the id from the array and attempt to treat it like an HTML element.

In moveup(), you need something like:

var realObj = document.getElementById(obj);

var xypos = findPos(realObj);

What you have there now only passes the id to that function. A better variable naming scheme would help eliminate the confusion.

Sign In

Not getting offsetParent of obj...

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information