14. function glideMenu(obj) {
15. if (document.getElementById) {
16. el = document.getElementById(obj) ;
17. el.xpos = el.offsetLeft;
18.}
19. else if (document.layers) {
20. el = document.layers[obj] ;
21. el.xpos = el.left;
22.}
23. if (el.xpos < endPos) {
24. clearTimeout(timer1);
25. }
26. else if (el.xpos >= endPos) {
27. clearTimeout(timer1);
28.}
29. distance = endPos - el.xpos + offset;
30. steps = distance*decrease;
31. el.xpos += steps;
32. if (document.layers) {
33. el.left = el.xpos;
34. }
35.else if (document.getElementById) {
36. el.style.left = el.xpos+px ;
37.}
38. timer1= setTimeout("glideMenu('" + obj + "')",timerspeed);
39. }

Line 14:Creates the function glideMenu() and assigns the obj argument as a parameter of the function. The obj argument is used to identify which element to move towards the active link.

Line 15:Defines a condition. If the browser meets the document.getElementById condition then the next line in the function is run, otherwise it skips through to the next condition.

Line 16:A new variable called el (short for element) is defined and is pointed to the document.getElementById(obj) ; statement. This allows us to create a JavaScript object of any element we identify with the obj argument by looking at its id value and then passing it to the function.

Line 17:The el variable is used to tag on a custom attribute, named xpos (short for x position of element). Consequently the el.xpos variable is pointed to the current position of that element with the el.offsetLeft; portion of the statement.

It is important to recognise why we are capturing the elements current position. The essence of the script is to firstly capture the active links current position and then also capture the element to be moved towards that link current position. In doing so we set up two animations points, point A and point B if you will. Once we have defined these two points, then later in the function we can define how something will move from point A to point B or vica versa.

Line 18:Closing bracket for condition.

Line 19:Specifies a condition for Netscape 4 by using the document.layers object.

Line 20Creates a variable named el and that is pointed to the document.layers object with obj used as an argument.

Line 21:Similar to the previous conditional statement we tag on a custom attribute named xpos and point it to the elements current left position. The reason we need to condition this portion of the script is that Netscape 4 uses a different method than standards based browsers do.

Line 22:Closing bracket for condition.

Line 23 to 28:When animating elements it is important to clear any timers out first before proceeding to animate an element. This section of the script is designed to do that based on which direction the element is moving towards.

Line 29:Sees the first of animation calculations begin. The purpose of this statement is to calculate the distance the animation needs to travel. We create a new variable called distance and point it to the equation endPos - el.xpos + offset. If you recall the endPos is the active link current position, which is then subtracted from the element that we want to move towards the active link current position. Finally we add our little offset variable value to the equation.

Line 30:We use another variable named steps to further refine the animation by pointing it to the distance variable multiplied by the decrease variable, we created earlier on in the script.

Line 31:The el.xpos variable is then set to increment at each click of the timer with the =+ operand.

Line 32 to 37:Standards based browser use the style property, Netscape 4 does not Therefore we need two different methods to point the elements current position to its new position as the function is called by the timer. This allows us to animate the element by first incrementing the variables involved (see Line 31) and then reposition the element to its new position that matches the variables being incremented.

Line 38:Calls a setTimeout() method which recursively calls this function at whatever the timerspeed variable is set too.

Line 39:Closing bracket for argument.