JavaScript + CSS + DOM Magic
June 7, 2002
|
JavaScript + CSS + DOM Magic has directly applicable projects
with step-by-step instructions showing you how to master a feature
and adapt it according to their own needs and creativity.
Chapter 12 covers Transitional CSS and JavaScript Strategies.
|
JavaScript + CSS + DOM Magic has directly applicable projects
with step-by-step instructions showing you how to master a feature
and adapt it according to their own needs and creativity.
The wealth of graphics will make this book easy to read and
visually appealing. This book makes JavaScript, CSS and DOM
easy to understand by providing directly applicable models to
readers' web sites. The book opens with a primer, giving context
to the technologies, and then jumps into over 25 step-by-step,
directly applicable projects. You will learn the most desired web
functionalities, including: frames, mouse-overs, windows, forms,
CGI, style sheets, dynamic positioning, and SSI. Reviewers have
called this book an unprecedented practical and comprehensive
DHTML guide. The CD contains complete working scripts, all
images from the book's examples, bonus graphics, trial version
of leading text editors (BBEdit Lite, Homesite).
Chapter 12: Transitional CSS and JavaScript Strategies
"In life, always do right. This will gratify some people and astonish
the rest."
—Mark Twain
A Tabbed Interface
Creating web sites that take advantage of the CSS and JavaScript capabilities
of modern browsers, while still accommodating older browsers, is a headache
faced by every site creator. In this project we'll explore some ways of
dealing with this issue.
PROJECT 12: TRANSITIONAL CSS AND JAVASCRIPT STRATEGIES
Figure 12.1
Getting 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.
JavaScript + CSS + DOM Magic
Creating the Base Graphics for the Tabs and Assembling the Tab Table - Page 2
|
