Some random experimentation with Javascript and CSS for web pages. The overall site also uses several javascripts and 6 possible CSS styles; one is randomly loaded each time a new page is visited, or if you refresh the page. (This particular page is an exception, as is the 404 :: File Not Found page set up for the domain.)

Here's css sheet #1 of the site. It has a basic set of styles/behaviors you can control, and because it can be used site-wide, provides a "master file" for styling of all the site's pages. The other versions are named style2.css, style3.css, etc. A javascript file, init.js, performs the random loading of one of the styles. The HTML calls the javascript by saying <script src="init.js"> ... then the commands in that file are actually "written into" the HTML file as it loads. This allows elements or behaviors of a page to be dynamic, and is used all over the web.

Another example is the footer on each page, which uses the javascript file footer.js. Since each individual page references the text in this file, if you ever want to change the footer (put in an image or an email, perhaps) you change the code in the footer.js file once. Now each page references the updated version, and the footer appears different :: no changes to individual pages are needed. And of course, you can always elect to use a different footer on a page-by-page basis -- instead of referencing the javascript file, just make a new footer for the page in question. The same concept applies to styles through CSS -- you can decide what styles (and in some ways, what behaviors) apply at which levels, and which parts override these.

This site uses javascript and CSS to standardize pages, to create rollover effects for images, and to provide an element of randomness or lack of control. You decide where you want to navigate and what you want to read, see, listen to, or copy, but the appearance shifts around somewhat. It's another expression of "control versus letting go" in the human-computer-data relationship. (Without javascript enabled in your browser, these dynamic elements become static.)

If the text (on all other pages besides this one) is black or unreadable, check your browser settings :: "Allow sites to apply their styles", or similar. Control-plus and control-minus change the font size.

Random project for a class :: dropdown menus with javascript, CSS, or a combination.

All materials and media are Copyright 2006, Christopher James (except where noted)

Home Page