JavaScript
  Home arrow JavaScript arrow Controllable Navigation Bars with JavaScri...
The Best Selling PC Migration Utility.
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Download TestComplete 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Controllable Navigation Bars with JavaScript, Part II
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 12
    2005-03-28

    Table of Contents:
  • Controllable Navigation Bars with JavaScript, Part II
  • Dealing with those details
  • Cleaning up the CSS styles
  • JavaScript to the rescue: the improved "switchBar()" function

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    Iron Speed
     
    ADVERTISEMENT

    Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

    Controllable Navigation Bars with JavaScript, Part II
    (Page 1 of 4 )

    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.

    Introduction

    Welcome to the second part of the series "Controllable navigation bars with JavaScript." In first article in this series, we briefly referred to the wide gamut of techniques often present in websites aimed primarily at boosting interactivity with users, while trying to expand capabilities beyond the limits of conventional HTML. In particular, we focused our attention to side navigation bars, giving users the possibility of hiding or displaying them in turn, and making the page's main content area much larger, and thus viewed more easily.

    If you feel that mysterious "deja vu" sensation when you're reading  these lines, it's probably because you've seen this technique used hundreds of times in several popular software applications. The first example that comes quickly to my mind is Macromedia's Flash and Dreamweaver programs, featuring stretching panels. Also worth noting is the file-browsing tab of Adobe Photoshop. Undoubtedly you'll want to add your own examples to the list.

    Having said that, all of these little details, when utilized properly, contribute to improving the usability of Web pages. If we think of it that way, it's great when we can do something to make our sites more usable without putting in hours of effort. I firmly believe that it's worth looking at these techniques. Just keep reading.

    More JavaScript Articles
    More By Alejandro Gervasio


       · Over this second part, the article deals with some browser incompatibilitiesand...
     

    JAVASCRIPT ARTICLES

    - A Closer Look at Smart Markers with Yahoo! M...
    - Using Polylines and Smart Markers with Yahoo...
    - Bulleted Menu of Links
    - Creating Click Loggers and Basic Markers wit...
    - Adding Pan Controls to Yahoo! Maps
    - Adding Zoom Controls to Yahoo! Maps
    - Working with Yahoo! Maps
    - Building Image Zooming Controls with the DOM...
    - Working with Multiple Graphics for a Zoom Ap...
    - Improving an Image Zooming Application with ...
    - Zooming in on Images with JavaScript
    - JavaScript Date Objects: Universal Coordinat...
    - Javascript Objects: More Date Methods
    - JavaScript Objects: Dates
    - JavaScript Objects: Finishing Strings

    Iron Speed

     
    Accelerating Trading Partner Performance
     
    Competing on Analytics
     
    Cost Effective Scaling with Virtualization and Coyote Point Systems
     
    Five Checkpoints to Implementing IP Telephony
     
    Hosted Email Security: Staying Ahead of New Threats
     





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway