JavaScript

JavaScript is the behaviour layer of the Web. The articles found here generally focus on unobtrusive, accessible use of JavaScript rather than fancy effects for the sake of fancy effects.

Making elements keyboard focusable and clickable

Either use natively keyboard accessible elements to trigger JavaScript interactions or make what you use instead mimic the appropriate native element as closely as possible.

Posted on February 12, 2013

Using JavaScript to check if images are enabled

It can be useful to know if images are enabled in the browser, so that you can adjust your CSS and JS to make sure that the page is still usable even if images aren’t loaded.

Posted on November 1, 2012

Tell CSS that JavaScript is available ASAP

When you need to apply different styling depending on the availability of JavaScript, you want to let CSS know whether JS is on or not as soon as possible during page load.

Posted on September 20, 2012

An alternative to select elements as navigation in narrow viewports

Using a select element for navigation in narrow viewports is not an ideal solution. Here is an alternative technique that uses real links and is fully stylable.

Posted on June 8, 2012

Safer event handling with jQuery namespaced events

By namespacing events in your jQuery functions, you reduce the risk of interfering with other scripts when adding or removing handlers.

Posted on May 24, 2012

iOS orientation change and automatic text resizing

There is a clever script that fixes the iOS orientation change zoom bug. Here is a reminder about a couple of issues you may run into when using it.

Posted on May 9, 2012

End tags, semi-colons and maintainable code

Relying on browsers to magically insert missing code, like optional HTML tags or semi-colons and curly braces in JavaScript, is not developer-friendly.

Posted on April 17, 2012

Use only what you need

Don’t add boilerplate code, polyfills, shivs, frameworks and other things that increase the weight of your site unless you actually need it.

Posted on March 23, 2012

How to adjust an iframe element’s height to fit its content

In some cases JavaScript can be used to resize an iframe element to make it as tall as its content, making it look like the content is part of the parent page.

Posted on December 16, 2011

JavaScript-created markup also needs to be semantic and accessible

Browsers, assistive technology and end users have to deal with non-semantic markup even if it is inserted by JavaScript functions.

Posted on November 10, 2011

An accessible, keyboard friendly custom select menu

A way of styling the closed state of select elements without sacrificing accessibility.

Posted on November 3, 2011

Adaptive Web Design (Book review)

In this brief and easy-to-read book, Aaron Gustafson does an excellent job of explaining what progressive enhancement is and how to apply it in your daily work.

Posted on June 17, 2011

Get element text, including alt text for images, with JavaScript

A JavaScript function that returns the text content of an element and its descendants, including alternative text for images and image map areas.

Posted on May 16, 2011

Validate URL syntax with JavaScript

How to use JavaScript to verify that the path, query and fragment parts of a URL use valid syntax according to RFC 3986.

Posted on May 3, 2011

Make links focusable (or use real buttons)

When using a link to trigger JavaScript functionality, make it keyboard focusable by giving it a non-empty href attribute. Or use a real button instead.

Posted on April 20, 2011

How to find the center of an area element with JavaScript

A simple JavaScript function that takes an area element’s shape and coords attributes and returns an array holding the horizontal and vertical center coordinates.

Posted on April 18, 2011