Javascripts

1. About this page.
2. JavaScript Style Switching Method.
3. Browser Sniffer.
4. Resources and references.

About this page.

This page will outline the code and rational for any JavaScripting used on the site.

JavaScript Style Switching Method.

Cascading Style Sheets on this site are dynamically selected using JavaScript alone. There is no need to retrieve an external variable from a database or use Cookies.

Step one was to name the window property every time the user selects a different style.

<a href="javascript: window.name='medium'">medium</a>

Step two was to reload the page when the link was clicked.

<a href="javascript: window.name='medium'; window.location.reload()">medium</a>

Step three, on reloading a javascript function detected the name of the window and loads the correct style sheet. The window.name property is passed to JavaScript variable called "styleChoice".

The JavaScript is placed in an external file for easy access and maintenance. A link to the file is called from the head section of the HTML file.

This is how the style selector links are presented to the user.

font size: small | medium | large

Below is the code for the style selector links.

font size:
<a href="javascript: window.name='small'; window.location.reload()">small</a> |
<a href="javascript: window.name='medium'; window.location.reload()">medium</a> |
<a href="javascript: window.name='large'; window.location.reload()">large

The advantage of this method is that pages can be dynamically loaded without using a coldfussion database or “cookies”. Another advantage is that it is extremely fast.

Some developers could be critical of this method of changing style sheets. They would point out that any method that relies on client-side scripting is problematic. What if a user has disabled JavaScript from their browser preferences? In my defence I would point out that a default style sheet is loaded anyway in the conventional manner.

Secondly other methods for changing styles rely on using Cookies which some would argue are more problematic than JavaScript, see alternative methods for switching styles.

A recent modification to the javascript switching method is the addition of an accesskey.

When a user presses the accesskey s the page will reload with the small style being rendered.

Browser Sniffer.

A JavaScript function is used to detect older browsers and load a simpler Cascading Style Sheet. The script was originally developed by Netscape Communications © 1999-2001. Permission granted to reuse and distribute. The script and supporting documentation can be found at http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html.

Basically the script assigns values to a special variable "is_"
(1) browser vendor:
eg. is_nav [navigator],
(2) browser version number:
is_major (integer indicating major version number: 2, 3, 4 ...)
is_minor (float indicating full version number: 2.02, 3.01, 4.04 ...)
(3) browser vendor AND major version number
is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3,
(4) JavaScript version number:
is_js (float indicating full JavaScript version number: 1, 1.1, 1.2 ...)
(5) OS platform and version:

I placed the script in an external file and called the JavaScript function before the JavaScript switching function. On reloading browser type is detected and then window.name property.

I modified the switching function to accommadate older browsers.

In the case above a simplified style sheet is loaded if the browser is Internet Explorer Version 4.

Resources and references.

Laura Lemey, SAMS Teach Yourself Web Publishing with HTML and XHTML in 21 days, Sams Publishing, United States 2001, p 1041-89.

JavaScript and Cookies method
http://www.alistapart.com/stories/alternate/

Browser Sniffer Script
http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html