Archive for the ‘Web Development’ 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

A workaround for the CakePHP alphaNumeric issue

November 27th, 2009

Recently whilst building a CakePHP app on a shiny new server I noticed some unexpected behaviour when using an alphaNumeric rule to validate a model. Whatever I passed into the model returned false. That is to say that even a valid alphanumeric string threw up an exception. (if you haven’t already dived into CakePHP, you should – it’s a rapid development framework based on MVC.)

The issue seems to be tied to PHP 5.1.2 and the way regular expressions are handled, however it seems the it may appear in other configurations too. Before I get to a workaround, note I haven’t levelled the “bug” word at either PHP nor CakePHP – for all I know it could be a difference of opinion on how something should be handled. What I do know is that I would rather harness CakePHP’s flexibility to create custom model rules than try upgrading my current live server PHP installation.

Here is an example of how you should be able to implement the alphaNumeric rule using validation in CakePHP based on a simpliefied model called “User”:
class User extends AppModel

{
var $name = 'User';
var $helpers = array('Form');
var $validate = array(
'username' => array(
'loginRule-1' => array(
'rule' => 'alphaNumeric',
'last' => true,
'message' => 'Only letters and numbers allowed'
));
}

The rule in bold italics above is the one that doesn’t always work. However this can be easily rectified with a custom rule built on a regular expression seeking out valid alphanumeric strings.

To achieve this the alphaNumeric rule just needs to be replaced with this:

"rule" => array('custom', '/^[a-z0-9]*$/i'),

Problem solved.

New Launch Sports Recruitment International

April 8th, 2009

The latest project of my fledgling web design company in Spain, Zumo Internet has left the shelves. Sports Recruitment International is a re-tool of an already successful web site for a major recruiter of professionals in the sports and leisure industry.

We built the site in co-operation with T-MAX media from Oxford. Our input was cutting the new designs into valid XHTML and CSS, building some custom jQuery functionality and programming new features into their content management system. The result is a high-impact site for a major corporate client – and all just as Zumo Internet turns 1.

New Launch Commercial Roofing and Single Ply Membrane products.

February 26th, 2009

The most recent project from my web design company in Spain, Zumo Internet has been launched. IPS UK Ltd supply commercial roofing products. They supply and arrange contracting for some of the largest roofing projects in the UK as can be seen from their case studies of installed roofing systems.

» Read more: New Launch Commercial Roofing and Single Ply Membrane products.

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.

Tips for Manipulating dates in MySQL.

February 6th, 2009

Bypassing PHP to manipulate dates.

I despise working with dates in PHP. So much so that I now manipulate my dates using MySQL so I have everything I want in a php variable delivered by one SQL statement. Adding, subtracting, calculating differences and performing other date manipulations can be a pain in PHP. If you have a database connection running in your application it can be much quicker and easier to read if you work with dates in your SQL. The key to this is that you don’t need to work with tables and records in a database to use SQL. Many of the examples below don’t make queries against any record sets and yet they return valid results. » Read more: Tips for Manipulating dates in MySQL.

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.