Anatomy of a website part 2 - jQuery

The \'e\' logo

Although you can create a perfectly good website just using html and css it is possible to further enhance the site using tools such as jQuery.

This progressive enhancement of your site can improve the user experience dramatically.

As it happens your browser currently has JavaScript turned off. While that means that you won't be able to see the advanced features without turning it back on it is a good opportunity to demonstrate that this page (and the rest of the site) is still fully functional without it. It just lacks the additional polish and pizzaz..!

What can it do?

Image transitions

A common usage of jQuery is to add a little flair to image galleries or portfolio displays. Just click on the transition name to the right of the image to cycle through to the next one.

There are, of course, an almost limitless number of subtle variations on the above themes.

Forms

Forms are an everyday feature of the internet. From posting comments on blog articles and siging up to newsletters to submitting payment details when shopping online they perform a vital function on the modern web.
CSS can make them a little nicer to look at while jQuery can make them a little nicer to use.

Below is a simple form that requires text, a number and a postcode before it can be submitted.

A very simple check that there is at least some text entered in this field. Good for reminding users when a particular form field is compulsory.

Values entered into this field are checked that they are numbers. Good for a form field that requires someone to enter their phone number for example.

A form such as this picks up on the errors entered as they happen. So the user doesn't have to submit the form and wait for a response from the server before realising they have made a mistake.

Lightboxes

Lightboxes are semi-transparent overlays that can display content in a window on top of your normal viewing area. The can be used to hold images, videos, text or, in this case, short games written in jQuery. Go on, have a go..!

Play Pong!

Play Space Shooter