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?

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

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

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

case "down":
layerText.style.top = 150;
/ / --> Finish hiding

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

<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');">



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?

06-07-2006, 01:34 PM
Hi Soren Twilight,

Try something like below instead of your switch case:

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Positioning content dynamically</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
position: absolute;
left: 150px;
top: 100px;
<script type="text/javascript">
function moveX(obj, pos){
var elem = document.getElementById(obj);
elem.style.left = pos + "px";
function moveY(obj, pos){
var elem = document.getElementById(obj);
elem.style.top = pos + "px";
<div id="myLayer">
this is a positionable layer.
<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>

Hope this help!