Click Here!

PC Magazine

  PC Tech

JavaScript- Powered Stylesheets

Introduction

Setting the Stage

Building Blocks

Getting Dynamic

A Site for All Seasons

Figure 1: Setting style rules for IE and Navigator.

Figure 2: Customizing a Web site based on window size.

Figure 3: Creating a Web site for all seasons.



X10.com - The SuperSite for Home Automation!

Click Here!

 
  Categories
World Wide Web

JavaScript-Powered Stylesheets
Create state-of-the-art Web sites with JavaScript and Cascading Style Sheets. In this tutorial, we show you how to customize a page based on the date or season and how to tailor pages to users' screen dimensions.

By William Robert Stanek

Green with envy after visiting the latest cutting-edge Web site? Wish you could create designs like that? Well stop dreaming. Just about anyone can create a state-of-the-art Web site, but to do so you need the power tools of the Web elite: JavaScript and Cascading Style Sheets (CSS). Use JavaScript to make your Web site interactive; use CSS to give it a polished design. Combine the technologies--creating stylesheets powered by JavaScript--to tailor the Web site to the needs of individual users.

JavaScript-powered stylesheets can make style assignments when a document is first loaded into the browser window for individual HTML elements, CSS classes, and HTML elements with unique IDs. You can use this type of stylesheet to create pages that will update automatically based on user preferences, user environment settings, or even the date. We'll show you how to tailor your site to individual users' displays and dynamically update it for special occasions and holidays.

When you create a dynamic Web site, a key concern is browser compatibility: Your site must work with Microsoft Internet Explorer and Netscape Navigator. If these browsers supported the same object models and technologies, implementing such a Web site would be a lot easier. Unfortunately, you either have to create two different versions of your pages (one for IE and one for Navigator) or design code that works in both browsers. The latter alternative is usually the best, and it is what we'll focus on. Additionally, the techniques you'll learn won't break older browsers. In noncompliant browsers, your pages' content will simply display as initially designed, with no customization.

William Stanek is a frequent contributor to PC Magazine's Solutions section. He can be contacted at writing@tvpress.com.


With JavaScript and stylesheets, your site can show different background colors depending on the season. The left is for Halloween and the right for Christmas.

Next: Setting the Stage

Published as Internet Builder in the 5/4/99 issue of PC Magazine.

Related Links
Server-Side JavaScript -- PC Tech
DHTML That Works in Both IE and Navigator -- PC Tech
JavaScript -- DevHead
ScriptHead Archive -- DevHead
 
JavaScript Programming Courses -- ZDU

 
 SPONSORED LINKS
QUANTUM  Storage solutions to count on 24 hours/day, CLICK HERE
Sprint  FrameRelay: See why users rate Sprint #1 for frame relay
Beyond.com  Click here for free software!
Software  X10.com -- The SuperSite for Home Automation
Books  Buy a gift for MOM, a book from barnesandnoble.com
 ZDNET FEATURED LINKS
Freebies!  The latest FREE files - yours to download and keep!
Shop Smart  Compare prices on over 7,000 computer products & save
Contest  Win a Diamond MP3 Rio from ZDNet Auctions!
 MAGAZINE OFFERS
Free Issue  Get a risk-free issue of RED HERRING magazine today!

TOP
Copyright (c) 1999 Ziff-Davis Inc.