Now that we have a basic understanding of how to access CSS properties in a layer, let's examine a few scripts. Let's look at moving a layer around. First, let's look at the effect we want to achieve. Example 2

The Code

Let's enter the Layer Lab and examine that script:

<script language="javascript" type="text/javascript">
      function moveLayerLR(layerID,how){      //move layer Left or Right
            if(document.getElementById){
                  document.getElementById(layerID).style.left = parseInt(document.getElementById(layerID).style.left) + how;
            }else if(document.all){
                  document.all[layerID].style.left = parseInt(document.all[layerID].style.left) + how;
            }else if(document.layers){
                  document.layers[layerID].left = parseInt(document.layers[layerID].left) + how;
            }
      }

      function moveLayerUD(layerID,how){      //move layer Up or Down
            if(document.getElementById){
                  document.getElementById(layerID).style.top = parseInt(document.getElementById(layerID).style.top) + how;
            }else if(document.all){
                  document.all[layerID].style.top = parseInt(document.all[layerID].style.top) + how;
            }else if(document.layers){
                  document.layers[layerID].top = parseInt(document.layers[layerID].top) + how;
            }
      }
</script>

<div id="moveableLayer" style="position:absolute;font-family:Verdana;font-size:18px">

<form>
     <div align="center">
           <table width="4%" border="0" cellspacing="4" cellpadding="0">
                  <tr>
                        <td align="center" width="9%">&nbsp;</td>
                        <td align="center" width="57%">
                              <input type="button" value="up" onclick="moveLayerUD('moveableLayer',-5)">
                        </td>
                        <td align="center" width="34%">&nbsp;</td>
                  </tr>
                  <tr>
                        <td align="center" width="9%">
                              <input type="button" value="left" onclick="moveLayerLR('moveableLayer',-5)">
                        </td>
                        <td align="center" width="57%">&nbsp;</td>
                        <td align="center" width="34%">
                        <input type="button" value="right" onclick="moveLayerLR('moveableLayer',5)">
                  </td>
                  </tr>
                  <tr>
                        <td width="9%">&nbsp;</td>
                        <td align="center" width="57%">
                              <input type="button" value="down" onclick="moveLayerUD('moveableLayer',5)">
                        </td>
                        <td width="34%">&nbsp;</td>
                  </tr>
            </table>
      </div>
</form>

I color-coded the script to make it easier to follow what's going on (try to correspond the colors together and see if they make sense...that is if the array of colors doesn't blind you :D).

What we've done is we've basically created two generic functions, one to move a layer (specified by the layerID argument) right or left a certain amount of space (specified by the how argument) while the other does the same except it moves the layer up or down. Thus, when we call the two functions, we must specify the ID of the layer we want to move, and how much to move it, and we do this in our HTML code when we call the functions. This code really isn't all that complicated, but, we can shorten it by using a handy shortcut.

Next -->