This script is probably going to be the first of many "neat" scripts to come. Let's take a look at the effect, then the code. Example 4

How to: the code

      var interV, IW = window.innerWidth ? window.innerWidth : document.body.clientWidth;

This declares the interV variable (this will store the setTimeout()) as a global variable, along with the IW variable, which stores the "innerWidth" of the document.

      function accessCSS(layerID){
            if(document.getElementById){
                  return document.getElementById(layerID).style;
            }else if(document.all){
                  return document.all[layerID].style;
            }else if(document.layers){
                  return document.layers[layerID];
            }
      }

This is the generic code to access a layer's CSS properties.

      function moveThisLayer(layerID){
            layerPos = parseInt(accessCSS(layerID).left);
            layerPos<IW ? layerPos+=3 : layerPos=0;
            accessCSS(layerID).left= layerPos;
           interV = setTimeout("moveThisLayer('"+layerID+"')",10);
      }

This function finds the current position (X-coordinate to be exact) of the layer. Then, it adds three to it, unless it's too far over to the right so that it's out of the document's "innerWidth" (after all, we wouldn't want our layer to keep sailing far off into the sunset). It then calls the same function again in 10 milliseconds, creating a loop until we stop it.

<div id="ML" style="position:absolute;top:0;left:0"><a href="javascript:moveThisLayer('ML')" style="font-family:Verdana;font-size:24px">Move this Layer</a> &nbsp; &nbsp; <a href="javascript:void(0)" onclick="clearTimeout(interV)" style="font-family:Verdana;font-size:24px">Stop Moving</a></div>

And voila, we've got movement!! Now we'll briefly review some mouse issues, then we can do a little drag'n drop on target script.

Next -->