Archive for the ‘User Interface’ 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

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

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

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.

Alternating table row colours in PHP.

March 9th, 2006

Recently I have been tinkering with Ruby on Rails and I came across a rather nice method of alternating row colours using only two lines of code and a couple of CSS rules. I have been using this method in my PHP ever since and never looked back. This is a neat trick to alternate row colors on a table using PHP.

» Read more: Alternating table row colours in PHP.