- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (common.css)
- Creating the Supplemental CSS Style Rules (advanced.css)
- Creating the Basic Document Object Creation Script (docobj.js)
- Creating the Tab Navigation Script (tabs.js)
- Modifying the XHTML Markup to Call the Functions
This chapter is from the book
This chapter is from the book
This chapter is from the book
Project 12: Transitional CSS and Javascript Strategies
)
Figure
12.1Getting Started
Web site navigation interfaces that use a tab metaphor are very common. (Perhaps the best-known site that uses a tab-navigation interface is Amazon.com.) Yet in most cases, the navigation tabs are merely graphical links that load other pages from the server.
In this project, we show you how to create a tabbed "index-card" type of interface using a combination of CSS and JavaScript. All of the "pages" are actually contained in the one page; once the whole page is loaded into the browser, the user can very quickly "flip" through each "page" without having to reload content from the server.
Because we are using CSS and JavaScript, which are only recognized by the newer browsers, we've also taken steps to ensure that the page is still readable in older browsers.
Here are the main points we'll cover in this project:
Creating "gracefully degrading" pages using a combination of CSS and JavaScript
Modularizing the code
Using arrays to streamline the script
Manipulating the stacking order, or z-index, of elements
Gracefully Degrading Pages
The latest advanced graphical browsers offer a wealth of JavaScript and CSS features that were previously unavailable or too buggy to be practical. What's more, these modern browsers finally (in large part) follow a common set of standards as specified by the World Wide Web Consortium. This is a great development for those of us on the creative side of the World Wide Web.
There's still one thorny problem to face, however: How do you take advantage of these new methods and features but still accommodate users of version 4 and older browsers? Statistics for browser usage are in a constant state of flux, but as of this writing, a small yet still significant number of web surfers are using version 4 browsers.
Up until now, you have probably been accommodating users of older or alternate browsers using "browser sniffing" methods to redirect them to other pages, writing alternate content onto the page, and so on. However, this can greatly increase the time and cost needed to create and maintain a site.
In extreme cases, you may even have closed off users of older and alternate browsers by telling them that your site can only be accessed with certain browsers. This only invites resentment from your site visitors, who may never return to your site.
The method introduced in this project is called graceful degradation. Essentially, this means that you while you may design your page so that it's optimized for modern browsers, at the same time you ensure that the content of your site is viewable in older or non-graphical browsers. The goal is to make the same pages viewable and useable by the widest audience. See the "How It Works" sidebars at the end of this project to see how this is accomplished.