Javascript

Javascript / jQuery / Personal / User Interface / Web Development — 7 Comments
15
Jan 10

Select and Unselect All Checkboxes with jQuery

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):

Continue reading →

Javascript / jQuery / Web Development — 3 Comments
22
Feb 09

Thickbox, accessibility and search engine optimisation.

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. Continue reading →

Ajax / Javascript / jQuery / PHP / User Interface / Web Development — 9 Comments
7
Dec 08

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

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.

Continue reading →

Javascript / jQuery / User Interface / Web Development — No Comments
12
Oct 08

jQuery table effects plugin – v1.0

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.

Continue reading →

Ajax / Javascript / PHP / Scriptaculous / User Interface / Web Development — 80 Comments
9
Mar 08

Autocompletion with Scriptaculous and Ajax.

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.

Continue reading →