Log in

View Full Version : Change the Position of a Page Element script issue


Soren Twilight
06-07-2006, 12:26 AM
Can someone help me out here by telling me why this script isn't working?


<HTML>
<HEAD>
<TITLE>Positioning content dynamically</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide from browsers that do not support JavaScript

function move(direction) {

var layerText = document.getElementById("myLayer");

switch(direction) {
/ / If move() is called with an argument of "left," reposition text
/ / layer so that it is now 50 pixels from the left-hand side of the
/ / window.

case "left":
layerText.style.left = 50;
break;

case "right":
layerText.style.left = 150;
break;

case "up":
layerText.style.top = 50;
break;

case "down":
layerText.style.top = 150;
break;
}
}
/ / --> Finish hiding
</SCRIPT>
</HEAD>
<BODY>

<DIV ID="myLayer" STYLE="position:absolute; left:100; top:100;">
<P>this is a positionable layer.</P>
</DIV>

<FORM>
<INPUT TYPE="button" NAME="moveLayer" VALUE="Move left" onClick="move('left');">
<INPUT TYPE="button" NAME="moveLayer" VALUE="Move right" onClick="move('right');">
<INPUT TYPE="button" NAME="moveLayer" VALUE="Move up" onClick="move('up');">
<INPUT TYPE="button" NAME="moveLayer" VALUE="Move down" onClick="move('down');">

</FORM>

</BODY>
</HTML>


Its supposed to work so that when a user presses the buttons, the positionable layer moves to the left right, up or down. But when you press the buttons, nothing happens. I got this script from 'Javascript for dummies' which also came with a cd with all the scripts on it. Unfortunatly my cd has a big crack in it and it unreadable. So I scanned the page in the book onto my computer and I thought I fixed the minor inaccuracies of the converting the sanned document to editable text stage but apparently not. As far as I can tell, the text matches that of the text in the book exactly. Did I miss something?
otaku
06-07-2006, 01:34 PM
Hi Soren Twilight,

Try something like below instead of your switch case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Positioning content dynamically</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
#myLayer{
position: absolute;
left: 150px;
top: 100px;
}
</style>
<script type="text/javascript">
function moveX(obj, pos){
if(document.getElementById){
var elem = document.getElementById(obj);
elem.style.left = pos + "px";
}
}
function moveY(obj, pos){
if(document.getElementById){
var elem = document.getElementById(obj);
elem.style.top = pos + "px";
}
}
</script>
</head>
<body>
<div id="myLayer">
this is a positionable layer.
</div>
<div>
<a href="#" onclick="moveX('myLayer','100');return false">Move to left:100</a>
|
<a href="#" onclick="moveX('myLayer','200');return false">Move to left:200</a>
|
<a href="#" onclick="moveY('myLayer','250');return false">Move to top:250</a>
|
<a href="#" onclick="moveY('myLayer','70');return false">Move to top:70</a>
</div>
</body>
</html>


Hope this help!