The first time you hit the toolbar, say on the homepage, you might not want the toolbar to simply pop out. You might want something a little showier to get people's attention, to show them that it's there. So let's make it roll out somewhat slowly:
function tool_anim() {
if (parseInt(toolPos.left) < toolOutPos) {
toolPos.left = parseInt(toolPos.left) + initMove;
toolWaitID=setTimeout('tool_anim()', toolWait);
} else {
toolPos.left = toolOutPos;
toolTop.src = toolInImg;
toolBot.src = toolInImg;
}
}
Simply put, if the horizontal position of the toolbar is less than the position of where it should be when fully extended, then increase the horizontal position by a step and run this function again. Otherwise it sets the position to the final position (just in case) and changes the images to represent the new direction. All of the values were set as variables earlier in my script so that they can be changed later.
Next we make the routines that get called when the toolbar is clicked on:
function tool_click() {
if (parseInt(toolPos.left) == toolOutPos) {
tool_goIn();
} else {
tool_goOut();
}
}
function tool_goIn() {
toolPos.left = toolInPos;
toolTop.src = toolOutImg;
toolBot.src = toolOutImg;
}
function tool_goOut() {
toolPos.left = toolOutPos;
toolTop.src = toolInImg;
toolBot.src = toolInImg;
}
The main routine, tool_click() is a switch box. If the toolbar is in its out position, it goes in; if not, it goes out. Pretty simple. It also changes the images that have the arrows in them. And again, I've set up most of this with variables, so that a few lines at the top of the script define all of this:
var initMove = 10;
var toolWait = 2;
var toolInPos = -130;
var toolOutPos = 0;
var toolOutImg = 'outArrow.gif';
var toolInImg = 'inArrow.gif';
And there we go. You have a toolbar Mach II. One that is now part of your page and gets out of your way with a simple click. Will audiences accept this kind of toolbar? We shall see.
