Shifting_Div_Layers

For the following discussion, we will assume we have created a section in the : code format="html4strict"  #theLayer { left: 50px; top: 50px; position: absolute; } code and a layer somewhere in the body: code format="html4strict" This is the layer's content.

 code

Previously, we saw how to use a button to move the layer to a specific set of coordinates: code format="html4strict" Move the Layer code This works - it causes the layer's "left" and "top" values to become 100pixels and 150pixels. (Note: the "Move the Layer" link is not pictured above.)

However, if we press the link again, we won't notice any difference. It just sets the left and top values to the same numbers - so the div no longer moves.

The purpose of this tutorial is to show you how to make a button that causes the layer to move over a little bit each time. In other words, the goal is the following: Assuming the layer starts at left="50px," the first time you press the button, it causes the layer to move to left="55px," but the second time we press the button, the layer moves to "60px." Subsequent presses will move the layer to "65px," "70px," and so on.

This means that in order what to put into the "document.getElementById('theLayer').style.left = '###px';" the number (###) is always going to be different. In fact, the new value should be equal to the old value plus five pixels.

It is tempting to write a function that just takes the old value and adds 5 to it. For instance, here is a function that doesn't quite work. code format="javascript" // a non-working function function shiftLayerRight { // first, we make a variable called oldValue that has the former left value. oldValue = document.getElementById('theLayer').style.left; // then we add five to it and put it into another new variable, called newValue. newValue = oldValue+5; // then we put the newValue back into the layer's information document.getElementById('theLayer').style.left = newValue; } code Unfortunately, this doesn't quite work, for two reasons. 1) When the page originally loads, even though you set up the left and top in the section, they aren't immediately available to javascript. So when we said: getElementById('theLayer').style.left, instead of getting "50px," we get an empty string. (This is, I think, a glitch with javascript in most browsers.) 2) Even if we did manage to get oldValue to be "50px," adding five to it by saying newValue = oldValue + 5, we would get "50px5" instead of the "55px" we are looking for. The problem is that when you add things to a string (a collection of characters), it adds the numbers on to the end of the string, instead of doing math.

So here is what we need to do to deal with these two problems: 1) Create an "initialize" function that sets the left and top of the layer to their starting values... even though they //should// have been set when we we set up the 'theLayer' div in the section. We will make the computer run this function as soon as the page finishes loading. code format="javascript" function initialize {   document.getElementById('theLayer').style.left = '50px';    document.getElementById('theLayer').style.top = '50px'; } code Then we call this method by adding an "onLoad" attribute to the tag: code format="html4strict"  code (Remember, you only get one ... tag, so don't make a second tag - just update the one you already had. Now when the page finishes loading, it will manually put '50px' into the left and top of theLayer.

2) To force the computer to do math with the string, we need to convert the "50px" string we get from document.getElementById('theLayer').style.left into a number. We do this by using the **parseInt** function. code format="javascript"  oldValue = parseInt(document.getElementById('theLayer').style.left); code The parseInt command will take whatever string you put inside its parentheses and try to turn it into a number. That number is what gets sent into the "oldValue" variable. Then in the next line, ("newValue = oldValue+5;") when we add 5 to oldValue, it really will do math. 50+5 = 55. So newValue will be 55.

The problem in the next line is that we need to set theLayer's "left" to "55px," not "55." To do this, we can simply append the "px" on the end of the newValue. code format="javascript" document.getElementById('theLayer').style.left = newValue+"px"; code by adding the "px" string at the end of the 55 stored in newValue, we get the "55px" string we want to put in theLayer's left value.

So here is the final version: code format="html4strict" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> moving cow  #theLayer {left: 50px; top: 50px; position: absolute;}  function initialize {               document.getElementById('theLayer').style.left = "50px"; document.getElementById('theLayer').style.top = "50px"; }

function shiftLayerRight {               // first, we make a variable called oldValue that has the former left value. oldValue = parseInt(document.getElementById('theLayer').style.left); // then we add five to it and put it into another new variable, called newValue. newValue = oldValue + 5; // then we put the newValue (plus "px") back into the layer's information document.getElementById('theLayer').style.left = newValue+"px"; }    This is the Layer's content.

 Shift the Layer to the right.

code