Home arrow JavaScript arrow Page 4 - Controllable Navigation Bars with JavaScript, Part II
JAVASCRIPT

Controllable Navigation Bars with JavaScript, Part II


In the first article, we developed a simple JavaScript function that performs the task of hiding and showing a side bar within a Web document. In this article, we will clean up our code to deal with potential browser incompatibilities.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 15
March 28, 2005
TABLE OF CONTENTS:
  1. · Controllable Navigation Bars with JavaScript, Part II
  2. · Dealing with those details
  3. · Cleaning up the CSS styles
  4. · JavaScript to the rescue: the improved "switchBar()" function

print this article
SEARCH DEVARTICLES

Controllable Navigation Bars with JavaScript, Part II - JavaScript to the rescue: the improved "switchBar()" function
(Page 4 of 4 )

The logic of the initial JavaScript function was quite easy to understand. It took care of grasping the "navbar" and "content" divs, and appending on the fly, the "swicher" bar. Once inserted on the document tree, it programmatically controlled whether the side navigation bar was visible or hidden from view by responding to the click events fired by the user. If the bar was hidden, then the main containing column was expanded to the left, generating a larger content area. Otherwise, when the bar was displayed, the content area kept (or returned) to its original position and size.

Now, we'll be attaching the new function to the above logic. However, we're not going to rely on automatic widths for achieving the effect, since they are not rendered in the same manner by the major browsers. So, our alternative solution will be to have the script itself calculate the column widths and manipulate them according to the user's click actions. Going one step further, the function will match the heights of each containing column, rendering a consistent, height-matched layout. Although this last added functionality is not really necessary for making the script work properly, it's good to implement for final visual consistency.

Here's the code for the improved "switchBar()" function:

<script language="javascript">

switchBar=function(){

var navbar,content,headlines,swbar,maxheight,
contentWidth,navbarWidth;

// get navbar element

navbar=document.getElementById('navbar');

if(!navbar){return;}

// get content element

content=document.getElementById('content');

if(!content){return;}

// get headlines element

headlines=document.getElementById('headlines');

if(!headlines){return;}

// create switcher bar

swbar=document.createElement('div');

// assign attributes to switcher bar

swbar.id='switchbar';

swbar.title='hide navbar';

// insert switcher bar in document

content.parentNode.insertBefore(swbar,content);

// get content width & navbar width

if(content.offsetWidth&&navbar.offsetWidth){

contentWidth=content.offsetWidth;

navbarWidth=navbar.offsetWidth;

}

// assign onclick event handler to switcher bar

swbar.onclick=function(){

if(navbar.style&&swbar.style&&content.style){

// hide navbar

if(!navbar.style.display||navbar.style.display=='block'){

navbar.style.display='none';

swbar.style.backgroundImage='url(tab_right.gif)';

swbar.title='show navbar';

content.style.width=contentWidth+navbarWidth+'px';

}

// show navbar

else{

navbar.style.display='block';

swbar.style.backgroundImage='url(tab_left.gif)';

swbar.title='hide navbar';

content.style.width=contentWidth+'px';

}

}

}

maxheight=null;

// determine greatest height value

if(navbar.offsetHeight&
&content.offsetHeight&&headlines.offsetHeight){

maxheight=Math.max(navbar.offsetHeight,content.offsetHeight,
headlines.offsetHeight)+'px';

}

// assign greatest height value to containing divs

navbar.style.height=maxheight;

content.style.height=maxheight;

headlines.style.height=maxheight;

swbar.style.height=maxheight;

}

// execute function when page is loaded

window.onload=function(){

if(document.getElementById&&document.createElement){

switchBar();

}

}

</script>

Although the code is fairly well commented, let's go over each section to explain what it does. To begin with, the function gets all of the main columns, that is, "navbar," "content," and "headlines," respectively. Surely, you're wondering why we're going to the trouble of getting the "headlines" <div> element? Well, since the script is going to perform a height-matching operation at the end, this element is really needed. If you're using a two-column layout, you should remove the lines that reference the third column to keep the script working. The section below grasps the main <div> elements:

// get navbar element

navbar=document.getElementById('navbar');

if(!navbar){return;}

// get content element

content=document.getElementById('content');

if(!content){return;}

// get headlines element

headlines=document.getElementById('headlines');

if(!headlines){return;}

The next step is to create the "switcher" bar in memory, insert it into the document tree and assign its attributes. We do it in the following way:

// create switcher bar

swbar=document.createElement('div');

// assign attributes to switcher bar

swbar.id='switchbar';

swbar.title='hide navbar';

// insert switcher bar in document

content.parentNode.insertBefore(swbar,content);

Now, we calculate the width values for the "navbar" and "content" elements:

if(content.offsetWidth&&navbar.offsetWidth){

contentWidth=content.offsetWidth;

navbarWidth=navbar.offsetWidth;

}

Using the "offsetWidth" object property, we get the width values expressed in pixels for each element, which is fairly well supported by modern browsers. Next, we need to assign the "onclick" event handler to the "switcher" bar and hide or show our side navigation bar, alternately. In conjunction, we need to manipulate the "content" column width, according to the state of the "navbar" element.

It's a little messy, but not really difficult to understand. If the "navbar" element is hidden, then we need to add its width value to the width of the "content" column, making it expand to the left and occupy the whole screen space. Otherwise, if the "navbar" element is displayed, the width value of the "content" column is set to its original value. Hopefully, the following code helps to clarify the process described above:

swbar.onclick=function(){

if(navbar.style&&swbar.style&&content.style){

// hide navbar

if(!navbar.style.display||navbar.style.display=='block'){

navbar.style.display='none';

swbar.style.backgroundImage='url(tab_right.gif)';

swbar.title='show navbar';

content.style.width=contentWidth+navbarWidth+'px';

}

// show navbar

else{

navbar.style.display='block';

swbar.style.backgroundImage='url(tab_left.gif)';

swbar.title='hide navbar';

content.style.width=contentWidth+'px';

}

}

}

The below statement:

content.style.width=contentWidth+navbarWidth+'px';

will increase the width of the "content" column, making it expand to the left, while the following expression:

content.style.width=contentWidth+'px';

will restore the width to its original size.

At this point, we have the script doing the job for the hide-show sequence when the visitor clicks on the switcher bar. However, we need to match all of the columns' heights, in order for them to be consistently displayed on the page. We manage the height-matching process with the below lines:

maxheight=null;

// determine greatest height value

if(navbar.offsetHeight&&content.offsetHeight&
&headlines.offsetHeight){

maxheight=Math.max(navbar.offsetHeight,content.offsetHeight,
headlines.offsetHeight)+'px';

}

// assign greatest height value to containing divs

navbar.style.height=maxheight;

content.style.height=maxheight;

headlines.style.height=maxheight;

swbar.style.height=maxheight;

Here, we calculate the greatest height value of all the columns, and then assign that value to each one of them. As you can see, the process is very simple. Finally, we need to wrap the complete source code into a function that is called when the document is loaded:

// execute function when page is loaded

window.onload=function(){

if(document.getElementById&&document.createElement){

switchBar();

}

}

</script>

Now we have a working JavaScript function that generates a controllable navigation bar, making it easy to improve interactivity and usability within Web pages, without requiring significant changes to the underlying HTML code. Finally, we're in control with JavaScript!

Wrapping up

Over this series, we've clearly seen that some seemingly complex visual effects can be achieved with fairly simple JavaScript functions, without harming the HTML markup. However, we must deeply consider what happens if scripting is disabled by visitors, or the vast amount of client-side factors that will potentially affect the end result of any JavaScript code. As we know, browser compatibility issues arise easily when we implement some application to be executed in a client environment. Bearing that in mind, it's worth putting your skills into action for empowering several areas of websites. Fortunately, JavaScript can take you a long way toward that goal.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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