Examples

Here are some examples of work that I've done. Most, in fact all but one, were done for various users at the Webdeveloper forums.

CSS

• Column Layouts
  • Layout 1 - Absolute positioning, header, 3 columns, footer.
  • Layout 2 - Float based, header, 3 columns, footer.
  • Layout 3 - Float based, header, 2 columns, footer.
• Cross-column image - A relatively positioned image accross two floated columns of text.
• CSS image rollover - A CSS based approach to image rollovers, doesn't rely on JavaScript.
• ThriveFX - A design that I re-coded in CSS for someone.
• alexmos - Another design that I re-coded in CSS for someone.

JavaScript

• Click To Expand Menu - Nifty collapsable menu that uses cookies to maintain state.
• Click To Expand Menu 2 - New version, completely rewritten, 27/03/06.
• Collapsable Content - Similar to the menu, but for content, no cookies though.
• Menu Bar - A menu bar with rollover links and animated widget that flies to the last hovered-over link.
• Opacity Change Links - Links that gradually change opacity on mouseover.
• Random Fade In Image - Random image selected from an array fades in on page load.
• Reversi - A game that I wrote in JavaScript a while ago (does not validate).
• Scroll Panoramic Image
  • Loop - The image loops forever, good for 360 degree shots.
  • Side To Side - Doesn't loop forever, good for panoramic images.

Accessibility

All of the JavaScripts I've written are still accessible to those with JavaScript disabled (except Reversi).

A point I should make is that most of the HTML files will have an HTML 4.01 Transitional DTD, this is because most things on here were made for people on a forum who may not be all that good with HTML. Since HTML Trans is one of the more forgiving DTD's I felt it was the best DOCTYPE to use.

Download

You can download the examples for offline viewing here.