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
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.
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
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.
0 comments:
Post a Comment