JavaScript: Creating a Smooth Auto-Hiding Toolbar
When displaying photographs or other multimedia, a toolbar is a great way to manage the navigation – its simple, intuitive and unintrusive. It’s even less likely to detract from the experience if it hides itself automatically when not in use, and it looks cool if it does this in a slick, smooth way. For a simple example, see my Street Photography page.
Although you can do this quite easily in Flash, I prefer to work in JavaScript as it gives you much more control over search engine behaviour, and you can use the same components for users without JavaScript enabled – you don’t need two versions of your site. The following scripts work for all of the main browsers – IE, Firefox, Safari and Chrome.
The first stage is to make sure that you turn the scrollbars off on the page – the interface for displaying your photos is going to be all on one screen, with no need for the user to scroll up and down. So in your main CSS file:
body {
overflow: hidden;
}
Now in your HTML you want to define the DIV that will make up the toolbar. This can be anywhere in your HTML code:
<div id="topbar"> </div>
In your CSS file, position this block as you would like it for users without JavaScript enabled:
div#topbar {
position: absolute;
left: 0px;
top: 0px;
background-color: #CCCCCC;
background-image: url('/images/topback.png');
background-repeat: repeat-x;
width: 100%;
height: 34px;
}
Notice that I’m giving it an absolute position of 0px x 0px – so top left. I’m also describing its width as 100% – all the way across the screen, and its height as a set 34px. I’m giving it a background, which is simply a PNG with a basic gradient.
Now create a text file called nav.js – this is going to be the JavaScript file that controls the showing and hiding of the top navigation bar.
var mode="none";
var toppos = 0;
function getMouse(ev) {
var ypos = 0;
var xpos = 0;
if (!ev) {
ypos = window.event.clientY;
xpos = window.event.clientX;
} else {
ypos = ev.clientY;
xpos = ev.clientX;
}
if (ypos<100 && toppos<0 && mode!="show") {
mode="show";
process();
}
if (ypos>100 && toppos>-30 && mode!="hide") {
mode="hide";
process();
}
}
function process() {
if (mode=="hide") {
if (toppos>-30) {
toppos = toppos - 1;
document.getElementById("topbar").style.top = toppos + "px";
} else {
mode="none";
}
} else if (mode=="show") {
if (toppos<0) {
toppos = toppos + 1;
document.getElementById("topbar").style.top = toppos + "px";
} else {
mode="none";
}
}
if (mode!="none") {
setTimeout("process()",20);
}
}
To break this down a little:
- The first two variables are called
modeandtoppos.modedefines what should be happening right now - whether the toolbar should be retracting into the top of the screen (hide) or dropping down into the frame (show).topposgives the current position of the toolbar. - The
getMouse(ev)function (which we'll come to later) gets the current x and y position of the mouse within the browser window. If the mouse is under 100 pixels from the top of the window then we'll start dropping the toolbar down. If it is over 100 pixels then we'll start hiding the toolbar. - The
process()>function is a self-repeating function that actually manages the movement in a smooth way. It calls itself every 20 miliseconds while there is work to do, and increments the toolbar by 1px either upwards or downwards, depending on the currentmode. When the toolbar is fully hidden or fully shown, it changes themodeto "none" and stops calling itself.
We now need to call this nav.js file from your HTML file. So between the </head> and <body> tags put the following script declaration:
<script type="text/javascript" src="nav.js"></script>
Finally all you need to do is call the getMouse(ev) function from the HTML file. So in the HTML file change your <body> tag to something like this:
<body onMouseMove="getMouse(event);">
This will cause getMouse to be called everytime the mouse moves within the browser window, along with position information, allowing it to determine whether the toolbar should be shown or hidden.
You should now find that you have a nice toolbar box that moves in and out of the top of your page. The next stage is to start filling that with content and buttons (just put them with in the DIV). If you ensure that you use SEO-friendly JavaScript function calls then you should have a nifty-looking JavaScript powered site that is completely compatible with SEO best practice and users without JavaScript.
