...

View Full Version : Positionable layer script help! Please?



Twilight92
06-07-2006, 02:58 AM
This script is 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 mess up something?

Can someone tell me why this script doesn't work?

<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><Font color=blue>this is a positionable layer.</font></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>

coothead
06-07-2006, 04:46 AM
Hi there Twilight92,

you had two errors, '/ /' should be '//' and units must be defined...

<script 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+'px';
break;

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

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

case "down":
layerText.style.top = 150+'px';
break;
}
}

// --> Finish hiding
</script>
Also note that language="javascript" is a deprecated attribute.

coothead

Twilight92
06-07-2006, 07:44 PM
This does not work either

coothead
06-07-2006, 09:26 PM
Hi there Twilight92,

This does not work either

I tested the code successfully in these browsers using windows XP...

IE 6.02
Firefox 1.5.0.3
Opera 8.54

What browser/OS does it not work for you?

Here is the full code that I tested...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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:100px;
top:100px;
}
#myLayer p {
color:#00f;
background-color:#fff;
}
-->
</style>

<script 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+'px';
break;

case 'right':
layerText.style.left=150+'px';
break;

case 'up':
layerText.style.top=50+'px';
break;

case 'down':
layerText.style.top=150+'px';
break;
}
}

// --> Finish hiding
</script>

</head>
<body>

<div id="myLayer">
<p>this is a positionable layer.</p>
</div>

<form action="#">
<div>
<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')"/>
</div>

</form>

</body>
</html>
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum