Building blocks | Miscellaneous scripts | Forms | Frames and windows | Date and time | DHTML | Events
|Object detection (Beginner)||A very important concept that beginners should study carefully. If you write a complex script, you start by finding out if your users' browsers support advanced scripting. To do this, you need object detection The page includes a few old case studies.|
|Functions (Beginner)||Every script you'll write consists of functions. A function is a short series of commands that does something for you. This page details how functions work, what you can expect of them and what they expect from you.|
|Strings (Beginner)||Strings are enormously important, too. A string is a series of characters, like 'Hello!' or 'http://www.quirksmode' or '14'. You often need to read out or change something in a string. This page gives the gory details.|
for instance to check user input in a form or to change an image
non-traditional devices like screen readers. Unfortunately there are no simple general rules to make
scripts accessible. Besides, some scripts simply can't be made accessible.
This page gives some case studies that will help you understand the issues and devise your own
|Boolean logic (Intermediate)||Boolean logic is used by all programming languages. It defines the user of AND (
|Intermediate DOMs (Intermediate)||Netscape 4 and Explorer 4 each supported their own intermediate Document Object Model,
automatically generate more than enough objects to keep everybody happy.
This page details the only use of programmer-defined objects that I ever found: creating associative arrays. This page also explains
|The this keyword (Intermediate)||
Miscellaneous scriptsThese are the scripts that aren't easily classified, ranging from golden oldies to experimental new ones.
|Mouseover (Beginner)||My version of this golden oldie. Far easier to use than most mouseover scripts, though you'll have to use my naming system.|
|Click (Beginner)||The sequel to the mouseover. Adds an extra 'clicked' state to your buttons.|
|Browser detect (Intermediate)||Do not use this script. Newbies often overrate the importance of a browser detect. Read the
Object detection page first.
Any script that uses a browser detect is incorrect.
|Keep multiple IE's apart (Intermediate)||An extension of my browser detect script that serves to keep multiple versions of Explorer running on the same Windows box apart.|
|Flash detect (Intermediate)||This script checks if a browser has the Flash plugin installed, and if so which version.
This script is far simpler and better than Macromedia's one, or any other you can find on the WWW.
Works also for other plugins like Real Player and Acrobat.
|Cookies (Intermediate)||Cookies store information about your users or their preferences. This information is stored in your users' browsers and is available when that particular user visits your site again.|
|Get selection (Intermediate)||This small script finds text the user has selected with his mouse.|
|Writing into layers (Intermediate)||This script writes new content into a layer. It's somewhat buggy in Netscape 4.|
|Introduction to forms (Beginner)||An introduction to accessing forms and writing form validation scripts. Details about accessing form elements and finding out what the user has done.|
|Example form (Beginner)||A simple example script that validates a form. I can't give generic scripts for form validation since every form is different and every site needs its own brand of form validation.|
|Select box navigation (Beginner)||Select boxes have become powerful navigation tools. This simple script allows you to switch pages based on the selection of an option.|
|Dynamic options (Intermediate)||You can change which options are shown in a select box. This is often useful when you have several select boxes for a complicated navigation or for complicated selection tasks.|
|Disabling form fields (Intermediate)||Sometimes it's useful to disable a form field. The user cannot enter anything, and in modern browsers
gets a visual cue, too. This page includes a workaround for browsers that don't support the
|Introduction to frames (Beginner)||This page explains how to access other frames.|
|Cross-window scripting (Beginner)||Once you opened a popup you can establish communication between the popup and the opening page. This page gives the details.|
|Customized framesets (Beginner)||Creating a customized frameset, in which you can select which pages are loaded into the frames, is useful when you're working with a frames site but nonetheless want to allow 'deep-linking'. I use the script on this site to allow users to enter on any page they like, but within my frameset.|
|Frame Busting (Intermediate)||Some site owners wish to claim the content of external sites by capturing it in their own frameset. This script details how you can find out whether this has happened, and how you can bust out of someone else's frameset.|
|Iframes (Intermediate)||Iframes are inline frames, which means they're shown within a normal HTML page. Accessing an iframe is tricky. This page gives the details.|
|Window manipulation (Intermediate)||Parts have moved to the Viewport section. I retain the link here only for backwards compatibility with my
The less interesting part has been moved to the Archives.
|Introduction to date and time (Intermediate)||General information. Epoch time, the Date object, the millennium problem.|
|Date and time (Intermediate)||Finding the date and time and displaying it in a user friendly way.|
|Checking a date (Intermediate)||Finding out if a date a user has entered exists, and whether it lies in the past or the future.|
|Internet Beat (Intermediate)||Internet Beat time is a time measurement system that divides the day into 1000 beats of 86.4 seconds each. It creates a truly worldwide time system so that people in wildly different timezones can agree to mail "around @600". This page gives a simple script to calculate the Internet Beat.|
|Last modified (Intermediate)||
|Introduction to DHTML (Intermediate)||A detailed explanation of what DHTML is.|
|DHTML micro-API (Intermediate)||The worst DHTML problem is accessing an element. You need no less than three code blocks to do it properly. This tiny script manages element accessing for you. It's my answer to the hideous 100K object oriented junkyard bloatware that's wandering around the WWW in ghostly torment. You don't need a library, just my function and some general DHTML knowledge.|
|DHTML examples (Intermediate)||Some simple DHTML examples to show what DHTML can do for you.|
|Navigation: layers (Intermediate)||Archetypical DHTML functionality: a layer based navigation. When you mouse over a link that has a subnavigation attached, this subnavigation opens.|
|Navigation: display (Intermediate)||The script I use in the navigation frame. It's based on the changing of the
|Find position (Intermediate)||This script calculates the actual position of an HTML element on a page.|
|Scrolling layer (Intermediate)||This script creates and manages a scrolling layer for you.|
|Sticky menu (Intermediate)||This script manages a 'sticky' menu that appears in the same position every time the user
stops scrolling. It's my emulation of
|Bilingual pages (Intermediate)||This script creates an interface for bilingual pages. The user selects a preferred language, which is shown large. The other language disappears to the side, but remains clickable. I use this script in, for instance, my my Portfolio or Publications pages.|
|CSS Disabling (Intermediate)||This script enables and disables entire style sheets, so you can radically change the layout of your pages without a round-trip to the server.|
|Introduction to events (Intermediate)||General introduction to event handling. Overview of the right questions and the right answers.|
|The events (Intermediate)||Detailed description of available cross-browser events.|
|Early event handlers (Intermediate)||This page details event handling as supported by Netscape 2 and 3, and hence by all other browsers. Registring event handlers, default actions and the preventing thereof.|
|Traditional model (Intermediate)||This page explains the traditional event registration model, which works in all modern browsers. It also discusses the use of anonymous functions and some drawbacks of the model.|
|Advanced models (Intermediate)||This page discusses the advanced event registration models of W3C and Microsoft. W3C's model is good, Microsoft's isn't.|
|Event accessing (Intermediate)||This page explains how to access an event object. This is necessary if you want to read out event properties.|
|Event properties (Intermediate)||This page discusses interesting event properties and the severe browser incompatibilities surrounding their use.|
|Event order (Intermediate)||This page discusses the two event order models. When the user clicks on a nested element and both this element and its parent element have an onclick event handler, which one fires first?|
|Mouse events (Intermediate)||Detailed treatment of the mouse events: mouseover, mouseout, mousedown, mouseup, mousemove, click and dblclick.|
|Netscape 4 (Intermediate)||This page details the Netscape 4 event model. It's pretty complicated and even Netscape 4 itself doesn't always follow this model, and its documentation is incorrect at certain points.|
|Event compatibility tables (Intermediate)||Quick compatibility tables for the most common events and event properties. Includes links to the event pages where the properties are discussed.|