Click event handler iPhone: non-anchor elements

I have a results table where each row is a form and the user continues by pressing the submit button for that result. At smaller widths I collapse the table, hide the submit button and add a click event handler to the tr – it works fine, up to a point.

A filter bar was added that uses AJAX to reorder and add to the results so now the DOM is being generated with JS. Usually you can use .on(event, selector, handler) to catch any generated elements, but this won’t work on iPhone or iPad*. Continue reading

Maintaining the user journey with HTML 5 web storage

The HTML 5 specification includes a web storage API for data storage in web clients. It means we can store large amounts of data, client-side, to read and write to as we like without causing the site to slow down (when compared to using cookies). Continue reading

jQuery Cookie problem – persistence and duplication

I’ve started to use cookies to maintain user state and the jQuery Cookie plugin provides simple functions to create, read and delete cookies. However, I came across a problem where state didn’t appear to be persisting and on viewing the cookie information, using the web developer toolbar, I had multiple versions of the same cookie. Continue reading

Front-end developer essentials – 5 tips for efficient jQuery

Over the last few months I’d like to think my skills in jQuery have got a lot better, I’ve been using it everyday and for more than just showing and hiding areas of a page. Along the way I’ve read about a few ways in which you can make your code a bit more efficient. Continue reading

WAI-ARIA to enhance form validation

As a follow on from WAI-ARIA states and properties: Practical examples, I wanted to write up a bit more of what I’ve been adding to my current project. These examples all fall under how to cope with form validation and giving assistive-technology AT a view of what is going on. Continue reading

Quick tip: Live event not trapping submit in IE

This problem manifested itself when a user clicked submit from a form that had been loaded in using AJAX to a jQuery UI dialog box.

Everything was fine in my development browsers, but in IE the user would be posted off to a new page. Continue reading

jQuery: Accessible search toggle

This is an update to a post I wrote four years ago to make an accessible search toggle using Javascript. Since then Javascript libraries such as jQuery have become popular, so it makes sense to bring this post up-to-date. Continue reading

Javascript shorthand for cleaner code

Translation: Croatian

A few ways to save on some bytes in your Javascript code, as well as making it more readable and quicker to write: Continue reading

Removing forward slashes from a string

All I wanted was to remove all forward slashes in a string using Javascript. It turns out that’s more complicated than you’d think and after multiple searches on Google I finally found the answer, in a comment on somone’s post. Continue reading

Accessible Radio Buttons/Checkboxes

Take a straight forward question that is usually asked during any online sign-up form:

Gender:

It is marked up according to the WCAG Priority 2 checkpoint 12.4 that says you should associate labels explicitly with their controls (i.e. by using the label element).

<input type="radio" id="male" name="gender" />
<label for="male">Male</label>

However, I want to explicitly link the original question (gender) with the 2 possible answers and this isn’t possible using the label element because there can be only one label and one control per line. There are a couple of solutions. Continue reading

JavaScript: Accessible Search Toggle

This post is now out-of-date. Please refer to jQuery accessible search toggle instead.

To use a script in a way that ensures users without JavaScript get the same functionality as users with it enabled means it is accessible. It doesn’t necessarily mean the same user experience, but both must be able to view the same information. An example of this is using a script to open a new window to show some extra information: with script disabled the user should be able to view the same information, but within the same window.

Toggle via Radio Buttons

I want to allow the user to search within all sections of a website or to search within one or more chosen groups. The list should only be visible when the user selects that they want to choose groups. To do this I am going to use 2 radio buttons to toggle the unordered list of sections on and off. Continue reading