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. |
/ 12 
