HTML Magic Edges

If you want the inner DIV element to scroll from the left, you have to give its initial CSS left value, a negative value whose magnitude is equal to the width of the inner DIV element. In this way the inner DIV element will be hidden completely on the left side of the edge. At this point you should not be seeing the right edge of the inner DIV element. What I have said here is also applicable when scrolling from the top.

Note this: this initial CSS left value should be coded in the attribute of the inner DIV element and not in the style sheet. If you put it in the style sheet, the script you write may not work.

We are still focused on the basics. We shall write a simple script, which will make the inner DIV element scroll from the left edge of the outer DIV element into it. Add the script below to the code of the DIV elements above, but inside the BODY element:

<script type="text/javascript">

var x = document.getElementById('Calc').style.left;

x = parseInt(x);

var TL = self.setInterval("shiftRight()",10);

function shiftRight()

{

document.getElementById('Calc').style.left = x;

if (x >= 0)

{

self.clearInterval(TL);

//adjust position

document.getElementById('Calc').style.left = "0px"

}

x+=3;

}

</script>

As soon as you open the page, you will see the calculator scrolling from the left to fill in the outer DIV element. Here, I have given the outer DIV element a border, so that you can identify it. In the project, there will be no border. We are still talking about the basics; we have not yet started the project. It is these basics that we shall use to develop the project.

The first line reads the CSS left value into the local variable, x. In our case, this value is –205px. The next line removes the px unit, rendering it as an integer. The inner DIV element is shifted by discrete distances (equal). If the interval of shift is at most 40ms, the user will not notice the discrete movement. He will see the movement as continuous. I chose a rate of 10ms. So the next line calls the shifting function every 10ms. It uses the setInterval() function, which is a method of the DOM window object. In the line, self, is the reference to the current window. The method takes two parameters: the first one is the function that is called after each interval specified in the second parameter in milliseconds. The method returns an ID, which is assigned to the TL variable.

Next, we have the function that shifts the inner DIV element by a particular distance. This function is called shiftRight(). It is called over and over by the setInterval() method. This function has to shift the inner DIV element to the right beginning from its initial left value. The first line in the function simply gives the inner DIV element its initial left value.

The next statement in the function is an if-statement. After shifting the inner DIV element to its final position, where it just fits into the outer DIV element, we have to stop the shifting. At this position, the left value of the inner DIV element should be zero. So the if-statement tests if the left value (now variable, x) is greater than or equal to zero. If it is, then the first line in the if-statement stops the shifting by clearing the interval process. It does so with the clearInterval() function, which is a method of the DOM window object. The parameter of the method is the ID returned by the setInterval() method. So this returned value is used to stop the re-calling of the function from the setInterval() method.

Following our code, it is possible that the inner DIV element will stop at a left value that is slightly higher than zero. If this is the case, we have to take it back to the zero position. The second statement inside the if-statement does this.

You might have been wondering how the distance of the inner DIV element really increases (changes). The last line in the shiftRight() does this. It increases the left value (x) by 3px. Each time the function is called, this value is increased by 3px. The first line of the function gives the inner DIV element the incremented left value.

Note: the code of this series works with Internet Explorer. It does not work with Netscape or Mozilla Firefox. I do not know if it works with some other browser. Remember that Internet Explorer is one of the most (if not the most) used browsers.

We are still working on the basics. We will take a break here and continue in the next part of the series.