| - basic scripting - |
|
So now that we've added that clumped <span> tag to the pool, let's start scripting this thing. First of all, we add <script> tags to inside the <head> tags. That part's easy enough. Then, remember what function was called up by the link? That's right: go();. So we start the go function. And of course, I didn't forget to detect the browser before the function, so it can be used in other functions as well. All that looks like this:
<script language="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
function go() {
}
//-->
</script>
Then, before we proceed, let me make sure that another point is made clear of how this script will work. When the link is clicked, the sub-menu will slide right to exactly left=50, top=20. Then, if the link is clicked again, the sub-menu will slide left out of sight. So, for this to work we need a variable to keep things straight. We'll call the variable "way". If the value is 0, then the sub-menu is sliding left, or is already hidden. If the value is 1, then the sub-menu is sliding right, or is already right. Then, the script will act accordingly. So the script will find which way the sub-menu is sliding, and then slide it the other direction. To do this we define "way" as already up before the function, so the variable can be used in other functions as well. Then, in the funcition go(), it finds where the sub-menu is, and then acts accordingly, sliding it the other way. The function to slide it right is called "goRight()". The function to slide it up is called "goLeft()". I like to use original names as function names. :) All of that scripted looks like this:
<script language="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
var way = 0;
function go() {
if (way == 0) { goRight(); }
if (way == 1) { goLeft(); }
}
function goRight() {
}
function goLeft() {
}
//-->
</script>
Now to actually start moving something. As usual, we'll first script it in MIE 4.0, so that Netscape is easier. Our object's name is menu1. So to access the top property of the menu1 object in Microsoft, it would look like: menu1.style.top, and in Netscape it would be: document.menu1.top. Remeber from the last script how we used parseInt() with everything in Microsoft. parseInt() takes whatever is in it's paranthasees and takes the first number out of it. Therefore, in Microsoft it would take out the"px" at the end of the number, making that number usable. So, to first script the object going right, we fill in the Microsoft way in the function goRight(). (the added lines are bolded)
<script language="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
var way = 0;
function go() {
if (way == 0) { goRight(); }
if (way == 1) { goLeft(); }
}
function goRight() {
if (m) {
menu1.style.left = parseInt(menu1.style.left) + 10;
if (parseInt(menu1.style.left) == 50) { way=1; return false; }
}
setTimeout("goRight()",10);
}
function goLeft() {
}
//-->
</script>
The first added line, if (m) {, says "if the browser is Microsoft, then do the following", which leads to the next line: menu1.style.left = parseInt(menu1.style.left) + 10; Notice how it's going to move at an increment of ten. The next line is crucial: if (parseInt(menu1.style.left) == 50) { way=1; return false; } "If the object is in it's resting spot, then change the variable way to equal 1, and then return false;" We change the variable way here, so that the next time the link is clicked, the sub-menu will slide to the left. So, the working is here. The menu will slide left, but not right. The next step is to move the menu to the left, correct? Well, the new scripting bit is practically the same as the one used to go to the right, but it's just moved left. (the new script is bolded)
<script language="JavaScript">
<!--
var m = (document.all);
var n = (document.layers);
var way = 0;
function go() {
if (way == 0) { goRight(); }
if (way == 1) { goLeft(); }
}
function goRight() {
if (m) {
menu1.style.left = parseInt(menu1.style.left) + 10;
if (parseInt(menu1.style.left) == 50) { way=1; return false; }
}
setTimeout("goRight()",10);
}
function goLeft() {
if (m) {
menu1.style.left = parseInt(menu1.style.left) - 10;
if (parseInt(menu1.style.left) == -210) { way=0; return false; }
}
setTimeout("goLeft()",10);
}
//-->
</script>
That bit should be self-explanatory. The working script now is here. The next step is to script it in Netscape.
|