Controllable Navigation Bars with JavaScript, Part 1 - The JavaScript"switchBar()"function
(Page 3 of 4 )
In fact, the JavaScript code is fairly self-explanatory in its current incarnation. Before we go more deeply into the explanation, it’s convenient to list the complete source code, and then make the proper descriptions regarding to each part. The function is listed as follows:
<script language="javascript">
switchBar=function(){
var navbar,content,swbar;
navbar=document.getElementById('navbar');
if(!navbar){return;}
content=document.getElementById('content');
if(!content){return;}
swbar=document.createElement('div');
swbar.id='switchbar';
swbar.title='hide navbar';
content.parentNode.insertBefore(swbar,content);
swbar.onclick=function(){
if(navbar.style&&swbar.style){
if(!navbar.style.display||
navbar.style.display=='block'){
navbar.style.display='none';
swbar.style.backgroundImage=
'url(tab_right.gif)';
swbar.title='show navbar';
}
else{
navbar.style.display='block';
swbar.style.backgroundImage=
'url(tab_left.gif)';
swbar.title='hide navbar';
}
}
}
}
window.onload=function(){
if(document.getElementById&&document.
createElement){
switchBar();
}
}
</script>
Indeed, the function itself is quite simplistic. Let’s analyze in turn each section in order to get a good understanding about what they do. The script starts getting the "navbar" and "content" <div> elements from the page, since they will be manipulated later. Then, a new <div> element is created in memory, named "swbar." This is our switcher bar, mentioned above, which is assigned the selector "swicther" in order to apply the correct style. Also, a "title" attribute is added to the bar, to show initially the text "hide bar," indicating to the user that the sidebar can be hidden. The code section that performs these tasks is the following:
navbar=document.getElementById('navbar');
if(!navbar){return;}
content=document.getElementById('content');
if(!content){return;}
swbar=document.createElement('div');
swbar.id='switchbar';
swbar.title='hide navbar';
Next, the "switcher" <div> element is inserted into the document by locating the content node and then appending the element before to it, in the document tree. Using the DOM, it’s quite easy to do:
content.parentNode.insertBefore(swbar,content);
Now, the "switcher" bar has been inserted in the correct place within the page. The next step is to enable it to hide and display accordingly the "navbar" element. This is pretty easy to do by assigning an "onlclick" event handler to our "switcher" bar and setting the "navnar" element’s display property to "none" and "block," alternately. Let’s take a look at the code block that accomplishes the task:
swbar.onclick=function(){
if(navbar.style&&swbar.style){
if(!navbar.style.display||
navbar.style.display=='block'){
navbar.style.display='none';
swbar.style.backgroundImage=
'url(tab_right.gif)';
swbar.title='show navbar';
}
else{
navbar.style.display='block';
swbar.style.backgroundImage=
'url(tab_left.gif)';
swbar.title='hide navbar';
}
}
}
As part of the switching process, the "backgroundImage" property is manipulated too, for displaying a different background image each time the bar is clicked on. To do this, I’ve used "tab_left.gif" and "tab_right.gif" background images respectively, as you can see in the script. Of course, you can use the images that best suit your needs, or even apply an entirely different style. Additionally, the "title" attribute is changed according to the state of the "navbar" element. If it’s visible, the value will be "hide nav." Otherwise, the assigned value will be "show nav."
Finally, all we need to do for making the script work is to include it in a general function that usually will be executed once the document has been loaded. This process is often achieved by attaching an "onload" event handler to the window object, followed by the function name, since JavaScript supports the functional programming style, which means that functions can be treated just like any other data object and passed as arguments, stored in data structures, or even returned from other functions. In this case, we’ve wrapped the calling to the initial function"switchBar" into another one, for checking whether the browser supports the DOM.
window.onload=function(){
if(document.getElementById&&document.
createElement){
switchBar();
}
}
Wrapping the whole code into a generic function gives us more flexibility when we have multiple scripts that need to be executed when the page has been loaded. Using a single "window.onload" statement, only the last script attached will be executed. Another good approach to solving this problem involves the use of the "addEventListener" or "attachEvent()" methods, depending on which browser we’re dealing with. How this kind of dynamic event attachment should be handled is the subject of another article.
Back at our example, we’ve created a simple script that plays with the CCS "display" property to hide and show the side navigation bar. In the next section, we’ll see the full code for this example, as well as some handy images to illustrate the functionality of this technique.
Next: Complete code listing and background images >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
