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?

Code:

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

Code:

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

Thread: Change the Position of a Page Element script issue

Thread Tools

Search Thread

Change the Position of a Page Element script issue

Bookmarks

Bookmarks

Posting Permissions