Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Examples for Chapter 7

For these examples to work, you must be using a modern browser, which supports DOM scripting and have JavaScript enabled. It is worth disabling JavaScript, though, to see how the examples degrade when this is done. (Don't expect the calculator to do anything with JavaScript disabled.) If you do turn off JavaScript, the appearance of the site will change, so turn it back on again afterwards.

Image Gallery

Download the source for the image gallery. Zip archive, 888kB.

The archive contains two different versions of the script. The file image-swap.js (which is the one used in this version of index.html) shows how to combine code for browsers that use DOM events with code for those that use HTML events. The file image-swap2.js just contains the code based on HTML events, which are used in most of the examples in Chapter 7.

Show the image gallery. opens a new window.

Collapsible List

Download the source for the collapsible list. Zip archive, 8kB.

We have improved the appearance of this example slightly, compared to the version in the book, by using two separate rules for the line-height property in the embedded stylesheet.

Try the collapsible list opens a new window. Note that some browsers, including Firefox, consider the list marker triangles to be part of the list items, others, such as IE, Safari and Opera, don't, so you may have to click on the actual text to make the sub-lists appear and disappear.

This is not a production quality feature, just an incomplete demonstration of the principle. For instance, if you click on one of the items in a sub-list, the entire sub-list will collapse. Try making the script more robust. In particular, try adding links to all the items, and make sure that, when a user clicks on a link, it is followed.

Style Switching

Download the source for the simple style switcher. Zip archive, 12kB.

Try the style switcher opens a new window. This just a demo. Note that the navbar links don't point anywhere, and there is no rollover on the style switching link, as there should be.

Form Validation

Download the source for form validation. Zip archive, 8kB.

The criteria we use for validating the data are given in the book. The archive includes a little PHP script called support.php, which is used as the action attribute for the form. It just prints out all the data it receives, so you can check whether the validation is working. If you want to use this script, you must upload all the files in the archive to a server, and access the form using an http:// URL. Otherwise, you will just see the PHP code when you submit the form.

Test form validation opens a new window. Use this link if you cannot install the example on your own Web server.

Repayment Calculator

Download the source for the repayment calculator. Zip archive, 16kB.

This example does nothing if JavaScript is not enabled, even though it draws the calculator on the page.

Use the repayment calculator opens a new window. Please note, as we state in the book, you should not treat the results produced by this calculator as serious financial data.

AJAX Image Gallery

Download the source for the AJAX image gallery. Zip archive, 896kB.

This archive includes four versions of the script:

To get this example to work, you will have to upload all the files to a server, making sure that the XML files are in the same directory as the large images.

Try the AJAX image gallery opens a new window. Note, though, that the example isn't very exciting to play with. What is interesting here is the way it is implemented. This version uses XMLHttpRequest asynchronously, in the conventional way.