Javascript Library

Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

Javascript Library

You’ve got killer content.
You’re using good, clean HTML to structure it for presentation.
You’ve a taste for sophisticated style that only CSS can deliver.
You wanna spice things up a bit?
Buff up those web pages with interactive behaviour.
All courtesy of the DOM and a touch of javascript.

The above pretty much summarises the development methodology I follow. Personally I use strict XHTML markup, all style rules in the linked stylesheets. Linked javascripts provide additional behaviour when necessary. It’s not something I use often myself, but I enjoy coding them. And everything optimised to be lightweight and download fast!

The scripts work by manipulating the presentation — markup and style — through the Document Object Model [DOM]. Usually that means markup and styles must be written a certain way, or it won’t work. If you find my use of markup clashes with your own, feel free to modify the script to suit your needs.

Oh yes. All the code within the javascript library — HTML, CSS and javascript — is 100% free and available for any use, personal or commercial. Borrow from it, adapt it, rip it off. Enjoy!

Complete scripts

Here are the scripts that are finished, and in most cases, documented.

  1. Expanding menu

    Setup your navigation as a menu using an unordered list. This script will convert a nested menu into an expanding menu. Uses text links for +/- controls to increase visibility with font size adjustments.

  2. Menu bar (popup menus)

    Setup your navigation as a menu using an unordered list. This script will convert a nested menu into a popup menu. Supports vertical and horizontal bars — just change a couple of CSS rules. Highlights current menu item and parent items. Submenus indicated by arrow (background image).

  3. Tabbed panels

    Reorganises sections of a page into a single space, accessed by “tabs”. An idea I had for shortening page length and reducing scrolling.

  4. Window popups

    Simple management of popup windows. Position windows from top, left, bottom and right of the screen. Includes reusing (and resizing and repositioning of) existing windows.

Scripts in development

I usually have a couple of scripts bubbling along. Feel free to take a peek and use anything that you like. Remember that these scripts are still in development and haven’t been fully tested.

  1. Multiple document interface

    My attempt at implementing a multiple document interface (floating windows) model with javascript. Still lots of work left to be done.

  2. Form validation

    A library of useful data validation functions, with display of errors and warning messages. I hope to pair this with CGI validation script (in perl) for robustness and ultimately would like to be able to implement XForms through this. High hopes!

Dead and buried

A collection of scripts that were written before I knew much about web standards. You might find them useful, particularly the Netscape 4 support, but don’t expect the HTML, CSS or DOM coding to be polished.

  1. Expanding Collapsing Menu System

    An expanding menu. It does work in Netscape 4, however it’s heavy code and only works with javascript. You’ll need to provide an alternate menu for accessibility. I strongly recommend using the accessible expanding menu script — it’s much better!

  2. Scroller

    I wanted to write a scroller that could be operated like a VCR, especially rewind! And here it is. One day I’d like to provide a better alternative to this dated script, but nobody seems terribly worried about it.

That’s it. As I said earlier, all the code within the javascript library is free. Enjoy it! Any feedback is welcome.

[ inspire logo ]
Code in the javascript library is free to use. Enjoy! Feedback welcome.
© Ben Boyle 2003.