Home arrow JavaScript arrow Page 2 - 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 - Dealing with those details
(Page 2 of 4 )

In the first article, we developed a simple JavaScript function that works in conjunction with some CSS styles, and performs fairly decently the task of hiding and showing a side bar within a Web document. Let's remind ourselves how the function looked originally:

<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>

To work in conjunction with the above function, we had basically defined three contextual selectors to be applied to the main containing <div> elements and one additional for the switcher bar:

<style type="text/css">

body {

margin: 0;

}

#navbar {

float: left;

width: 15%;

height: 600px;

background: #ccf;

padding: 10px;

border-left: 1px solid #000;

border-bottom: 1px solid #000;

}

#switchbar {

float: left;

width: 18px;

height: 600px;

background: #fff url("tab_left.gif") repeat-y center center;

padding-top: 10px;

padding-bottom: 10px;

}

#content {

float: left;

width: auto;

padding: 10px;

border-bottom: 1px solid #000;

}

#headlines {

float: right;

width: 15%;

height: 600px;

background: #ccf;

padding: 10px;

border-left: 1px solid #000;

border-right: 1px solid #000;

border-bottom: 1px solid #000;

}

</style>

However, the primitive function was set up to work with fixed-height <div> elements, certainly something that I'd prefer to stay away from, at least for liquid design. Another important drawback is that we were using a value of "auto" for setting the width attribute for the main <div> container or "content" column, in order to make it expand and collapse in turn.

But here, we're stepping on the wet floor of browser incompatibilities. Is that pretty familiar to you? Yes, some browsers don't behave in the same manner when they have to interpret this value, which keeps it from being more widely used. So, we're going to tackle all of these odd points present in the original script and CSS declarations, and try to fix  the buggy features, in order to gain functionality and make the whole code more compatible with most browsers. Are you ready to face the challenge? It's not so difficult.


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