Home arrow JavaScript arrow Page 3 - Controllable Navigation Bars with JavaScript, Part 1
JAVASCRIPT

Controllable Navigation Bars with JavaScript, Part 1


Navigation bars that can be alternately displayed and hidden allow visitors to your website to read page contents more easily. Alejandro Gervasio explains how to set these up using HTML and JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
March 21, 2005
TABLE OF CONTENTS:
  1. · Controllable Navigation Bars with JavaScript, Part 1
  2. · Building core functionality
  3. · The JavaScript"switchBar()"function
  4. · Complete code listing and background images

print this article
SEARCH DEVARTICLES

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.

 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials