Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positionable layer script help! Please?

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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Twilight92,

    you had two errors, '/ /' should be '//' and units must be defined...
    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This does not work either

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    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...
    Code:
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •