Sitemap

All pages on my site.

Home
Contact
Sitemap
Links
Frequently Asked Questions
Support this site

JavaScript

Introduction: What JavaScript is. What it can do. Debugging scripts.
Table of contents

Building blocks

Placing JavaScript: How to add JavaScript to HTML pages. JavaScript includes. The <NOSCRIPT> tag
Object detection: How to see if a browser supports a certain object. Use this instead of a browser detect.
Statements: if() and for().
Functions: How does a JavaScript function work? What can you do with it?
Strings: What are strings and what can you do with them?
Level 0 DOM: General info about the DOMs; history. The Level 0 Document Object Model, for mouseovers and form checks.

 

Accessibility: Some thoughts about JavaScript and accessibility.
Boolean logic: Important in all programming languages.
Intermediate DOMs: The three DOMs that you need for cross-browser DHTML.
Associative arrays: How to use JavaScript objects as associative arrays.
The this keyword: How the this keyword works. Currently only treats event handling.

Miscellaneous scripts

Mouseover: My version of this classical script. Much simpler than most versions.
Click: The sequel to the Mouseover script.
Print: How to write a print function.

 

Browser detect: How to see what browsers your visitors are using. Why not to depend on this too much.
Keep IE apart: An extension of my browser detect serving to keep the various IE versions apart.
Flash detect: How to see if your users have Flash installed. Also works for other plugins
ActionScript and JavaScript: How to make JavaScript communicate with ActionScript and vice versa.
Cookies: How to manage cookies.
Get selection: How to find out what text the user has selected with his mouse.
Writing into layers: How to change the text of elements on your page. Netscape 4 bugginess!

Forms

Introduction to forms: How to write a script that checks user input in a form.
Example form: Simple example of a script that checks user input in a form.
Select box navigation: How to let the user navigate by a select box (drop-down menu).

 

Dynamic options: How to write a script that dynamically changes options in a select box.
Disabling form fields: How to write a script that disables form fields.

Frames and windows

Introduction to frames: How to influence other frames.
Popups: How to create a popup exactly as you want it.
Cross-window scripting: Sequel to the pop-up script. How to influence other windows.
Customized framesets: How to put a specific page (not the homepage) in your frameset.

 

Frame busting: How to stay out of someone else's frameset.
Iframes: How to deal with iframes.

 

Date and time

Introduction to date and time: Epoch Time. The Date object and its methods. The millennium problem and its solution. Compatibility table for date.getYear() and date.getFullYear().
Date and time: How to write a script that prints out the date and time.
Checking a date: How to find out whether a date a user has filled in exists, and whether it's in the future or the past.
Internet Beat: How to write a script that calculates the current Internet Beat time.
Last modified: How to write a script that shows how old your documents are in a user friendly way.

DHTML

Introduction to DHTML: What is DHTML. How to write cross-browser scripts.
DHTML micro API: Tiny script that solves all DOM difficulties for you.
DHTML examples: Simple example of cross-browser DHTML.
Navigation: layers: How to make a DHTML layer navigation.
Navigation: display: The navigation script in this frame
Find position: How to get the true position of an element on the page.
Scrolling layer: How to create a layer that can scroll, a bit like an IFRAME.
Sticky menu: How to create a 'sticky' menu that somewhat emulates position: fixed.
Bilingual pages: How to create an interface for bilingual pages
CSS Disabling: How to disable certain style sheets so that your users can choose which style sheet they like best.

Events

Introduction to Events: General introduction to event handling. Overview. Browser compatibility problems.
The events: Event descriptions and compatibility tables.
Early event handlers: Inline model, default actions and preventing them.
Traditional model: The traditional event registration model that works in all Version 4+ browsers.
Advanced models: The W3C and Microsoft event registration models.
Event accessing: How to access the event object.
Event properties: How to read out event properties despite serious browser incompatibilities.
Event order: Event capturing and event bubbling. currentTarget
Mouse events: Some advanced tricks and problems of the mouse events. relatedTarget, fromElement, toElement.
Netscape 4: How Netscape 4 mangles event handling.
Event compatibility tables: Quick overview. For the complete list see W3C DOM Events Compatibility Table

W3C DOM

Introduction: Introduction to the Level 1 DOM. Nodes, walking through them, changing them, creating or removing them.
Mailing list: My W3C DOM mailing list.
Table of contents: Table of Contents

Tests

Compatibility - Core
Compatibility - HTML
Compatibility - CSS
Compatibility - Events
W3C methods vs. innerHTML: Test script to find the fastest way to write large amounts of content into the page.

Scripts

Import XML: How to import an XML document into an HTML document and read out the data.
Edit text: How to allow users to edit a text on a page.
Get styles: How to get the default styles of your page.
Change style sheet: How to change an entire style sheet.
TOC: A script that generates a Table of Contents
Image replacement: Fahrner Image Replacement needs JavaScript, not CSS
Three column stretching: To stretch three floated columns to the same height

Forms

Usable Forms: How to show and hide form fields based on user actions.
Extending forms: An example script for the way in which the W3C DOM may radically change the interaction of a site.
Error messages: How to write error messages next to the form field they apply to.
Web Forms 2.0: Notes and comments on the Web Forms 2.0 specification

CSS

Table of contents: Includes browser compatibility chart
CSS Hacks: Why not to use them
Conditional comments: Explorer Windows only
JavaScript in CSS files: Why not to use it

Selectors

* selector: To select all elements
> selector: To select direct children of an element
+ selector: To select the next sibling of an element
[attr] selector: To select an element with a certain attribute
Multiple classes: Giving an element two or more classes

Pseudo- classes

:hover and :active: Elements with the mouse over them, or active elements
:before and :after: Insert content before or after an element
:focus: Form elements that have the focus
:first-child and :last-child: Select first and last children of an element
:first-line and :first-letter: Select the first line or the first letter of an element
:not and :empty: Mozilla extensions
:root: The root element, or initial containing block

Declarations

position: static, relative, absolute, fixed
display: block, inline, inline-block, none, list-item, run-in, compact, table
overflow: visible, hidden, scroll, auto
min and max: min-width, max-width, min-height, max-height
cursor: auto, crosshair, default, help, move, pointer (and hand), progress, text, wait
List styles: list-style-type, list-style-image, list-style-position
outline: Severe browser incompatibilities
Fun with tables: empty-cells, border-collapse, border-spacing, table-layout
Scrollbar colors: Explorer Windows only.
opacity
visibility: collapse: To collapse table columns or rows
white-space: pre, nowrap
content: To overwrite the content of an element
background-position: To define the position of a background image
text-shadow: To define a text shadow

Tasks

Box model tweaking: How to switch box models
100% height: How to let an element stretch 100% of the height of the browser screen
background-attachment on any element: How background images behave on elements other than the body. Incompatibility soup
Tableless forms
Centering a site: For those silly 800x600 designs that must be centered in the browser window
img and display: When does the browser load an image with display: none
pre:hover {overflow: visible}: A little experiment.

Browser bugs

IE5 Mac Horizontal scrollbar bug: How IE5Mac adds a secret margin to absolutely positioned elements
IE5Mac overflow: hidden: overflow: hidden on BODY propagates to next page
IE5Mac overflow: auto: overflow: auto doesn't work properly
IE5Win position: relative: Relatively positioned elements inside absolutely positioned elements
IE6 Pure CSS Popups: An IE6 bug in Eric Meyer's Pure CSS Popups
Mozilla Tables as containers: A table is never a container for absolutely positioned elements
Explorer Windows, widths on TD's and colspans: When giving a TD a width, Explorer Windows maintains this width for the content of the TD, even when the TD has a colspan

Viewport

Introduction
Browser compatibility: Reading out the window dimensions, page dimensions and scrolling offset.
Experiments: Some random experiments.

Browsers

Introduction: General remarks. Which browsers do I test in?
Table of contents
Browser history
Multiple Explorers: How to run several Explorer versions on one computer

Current browsers

Explorer 5 and 6 Windows
Explorer 5 Mac
Mozilla
Opera 7
Safari
Netscape 4

Rare browsers

Old Mozilla's
Konqueror
Explorer 4
Opera 5 and 6
WebTV
iCab
Netscape 3
OmniWeb

Very rare browsers

Ice Storm
Escape
Opera 3
Opera 4
Hotjava 3
QNX Voyager
Explorer 3
Netscape 2

About

About this site and myself
Why QuirksMode?: Why I don't use doctypes and don't validate my pages
Why frames?: Why does this site use frames?
The making of QuirksMode.org: Why this site is as it is
Copyright: This site is largely, but not entirely, free of copyright. Read about the exceptions.
QuirksMode.org history
My CV
My publications

Freelance

Freelance web developer
Client side
Skills
Services
CSS1 reader: lang="nl"

Portfolio

DELA forms
ExMachina
Van Oorschot Publishers
Apple Internet Developer
Wanadoo
TAJ Dental Cosmetics
Beng
ING formulieren
Bache
Kuitenbrouwser
Valkieser Intranet
WIAB navigation editors
VPRO Homepage
Arisz et al.
World Press Photo
Galerie Carla Koch

Odds and ends

Table of contents
Key to compatibility tables

Writing

ALA and JavaScript - five months later: Did ALA JavaScript quality improve after my attack?
Why ALA's "JavaScript Image Replacement" is Very Bad: A critique of the ALA article JavaScript Image Replacement
The future of JavaScript: JavaScript is not for making layers slide. What is it for?
A history of web development: Personal and subjective
Netscape quits?: 2001 article in which I dispelled a rumour that Netscape would quit
Errata JavaScript hoofdstukken "Webdesign in de praktijk"
My life: Until 2001. Old page, will never be updated

HTML

<fieldset>, <legend> and <label>: The fieldset, legend and label tags
<wbr>: An almost unknown but very useful tag
lowsrc
Forms - id vs. name
XML/CSS example

XSL Example

Introduction page
XML Possibilities
About the XML/XSL example
How the XSL sheet works

JavaScript archives

Image protection: How to prevent users from copying images. Also works on Mac. This script is not entirely fail-safe but it helps somewhat.
Old Mouseover: My old mouseover script, still fit for Netscape 3.
Old W3C methods vs. innerHTML: Old test scripts.
Window manipulation: Window methods, example script
document.body and doctypes: The effect of doctype switching on document.body and document.documentElement.
DOM parsing script: Developers script that parses (part of) the document structure for you. Empty text nodes.
getYear() and getFullYear(): Ancient information, not updated since 2000
Display and visibility: Test page for the difference between display and visibility.
Banner rotation: How to switch banners without reloading the page.
Week number: How to get the number of the current week.
Browser incompatibility in image paths
Fixed table header: How to create a table header that scrolls with the table.
Valid email address: How to check if the user has entered a valid email address.
File size: Developer's script to find out how large your pages are.
Inline events: Compatibility table of inline events (event handlers inside a tag)
Old W3C DOM compatibility table: Old W3C DOM Compatibility table, created in December 2001.
Frame parsing: Developer's script that prints out the frame structure of a site. Useful when working with very complex framesets.
Form printing script: Developer's script that prints out the JavaScript forms object. Useful when writing your own form scripts.
Transfer options: How to transfer options from one select box to another.

History

QuirksMode.org history 2003
JavaScript Section 2003
JavaScript Section 2002
JavaScript Section 2001
JavaScript Section 2000 and before
CSS2 Tests
Clean up No frames Explanation