Posts Tagged ‘Javascript’

Click event handler iPhone: non-anchor elements

Friday, March 15th, 2013

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*. (more…)

Maintaining the user journey with HTML 5 web storage

Friday, January 21st, 2011

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). (more…)

jQuery Cookie problem – persistence and duplication

Wednesday, January 5th, 2011

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. (more…)

Front-end developer essentials – 5 tips for efficient jQuery

Saturday, December 11th, 2010

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. (more…)

WAI-ARIA to enhance form validation

Wednesday, December 1st, 2010

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. (more…)

Quick tip: Live event not trapping submit in IE

Thursday, August 12th, 2010

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. (more…)

jQuery: Accessible search toggle

Saturday, May 22nd, 2010

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. (more…)

Javascript shorthand for cleaner code

Thursday, May 20th, 2010
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: (more…)

Removing forward slashes from a string

Thursday, May 6th, 2010

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. (more…)

Accessible Radio Buttons/Checkboxes

Monday, September 18th, 2006

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. (more…)

JavaScript: Accessible Search Toggle

Saturday, June 24th, 2006
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. (more…)