Archive for the ‘Javascript’ category

Select and Unselect All Checkboxes with jQuery

January 15th, 2010

I’ve been working with jQuery to spice up my interfaces for over 12 months now and figured it’s time to share some of the little techniques I’ve developed on the way.

The first is something I use quite alot when I am giving users the ability to administer lists of items in bulk. That including a checkbox that when checked sets the state of all the checkboxes beside a list of items to “checked”. Naturally unchecking it will uncheck all checkboxes. I’m sure you get the picture here’s the code based on two scenarios depending on your preference. But firstly you need to include the jQuery library in the head of your document (I grab mine straight from Google’s repository to save my bandwidth):

» Read more: Select and Unselect All Checkboxes with jQuery

1 comment »

Posted in Javascript, Personal, User Interface, Web Development, jQuery

Thickbox, accessibility and search engine optimisation.

February 22nd, 2009

Recently I noticed that whilst my new project the Vietnam War Timeline was organically racing up the search engines, through virtue of being in a niche and growing daily in content, the bounce rate was exceptionally high. A lot of traffic was coming in but not venturing beyond the entry page.

After a very quick investigation it became apparent why this was: all links off the timeline fire a new Thickbox window with the relevant content. It’s a nice way to keep people within the timeline when they need to look at more content. Moreover, it’s unobtrusive, meaning the links can just be followed as normal by non-javascript enabled browsers. » Read more: Thickbox, accessibility and search engine optimisation.

3 comments »

Posted in Javascript, Web Development, jQuery

Drag and drop reordering of database fields (sortables) with jQuery

December 7th, 2008

This tutorial explains how to display a list of items from a database that can be reordered in real time by dragging and dropping, using the jQuery library. Moreover, no page reload is required on every reorder. If you want a bigger introduction to why you may want to do this I suggest reading my tutorial on how to achieve the same functionality using scriptaculous.

Previously I have explained how to achieve this in Scriptaculous and Mootools.

» Read more: Drag and drop reordering of database fields (sortables) with jQuery

5 comments »

Posted in Ajax, Javascript, PHP, User Interface, Web Development, jQuery

jQuery table effects plugin – v1.0

October 12th, 2008

See the demo here.

My first outing into producing a jQuery plugin is the limited, but useful “jQuery table effects”.

The current version defines the following features:

  1. Alternating row colours for readability (striping).
  2. onmouseover and onmouseout events for manipulating the background colour of the row.

» Read more: jQuery table effects plugin – v1.0

No comments »

Posted in Javascript, User Interface, Web Development, jQuery

Autocompletion with Scriptaculous and Ajax.

March 9th, 2008

Demo here | Download sample files

This tutorial supercedes my previous turtorial on autocompletion by adding further tips and tricks to make your autocompletion a much better experience for your site users The tutorial is structured in the following way:

  1. Introduction: What is autocompletion and why use it?
  2. How it works.
  3. Getting scriptaculous and building the form.
  4. Building the autocomplete server.
  5. Passing back an id to our form.

» Read more: Autocompletion with Scriptaculous and Ajax.

71 comments »

Posted in Ajax, Javascript, PHP, Scriptaculous, User Interface, Web Development