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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

and then somewhere in your document a controller checkbox that toggles all the others (note the call to toggleChecked when the state of the checkbox changes):

<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All

Now here are  two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes:

1: All checkboxes have a class of  “checkbox” (<input type=”checkbox” class=”checkbox” />)
function toggleChecked(status) {
$(".checkbox").each( function() {
$(this).attr("checked",status);
})
}

2: All the checkboxes are contained within a div with an arbitary id:

<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

In this case the function would look like this:

function toggleChecked(status) {
$("#checkboxes input").each( function() {
$(this).attr("checked",status);
})


Have fun!

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.

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.

They also specialize in commercial and domestic green roofs.  Green roofs / vegetated roofs or roofs with vegetated spaces – are a simple, attractive, ecologically beneficial and economically viable solution to many of today’s environmental issues. They have been adopted extensively in Europe (particularly in Germany) but have not really been taken up to the same extent in this country.

Zumo Internet designed and developed a content managed site for them as well as building intranet so they can manage their commercial roofing projects and keep a track on clients and warranties for roofing systems provided by them.

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.

However, therein lies the issue of the exceptional bounce rate.

The Thickbox pages are all indexed well by the search engines. Indeed, as they often hold the relevant content, they figure higher than the home page itself for many searches. But these individual pages are devoid of navigation and are singletons in the sense that they give no indication of more related information being available.  In SEO terms they are orphaned pages and in real user terms they offer no way for the user to investigate more of the site.

You’re probably ahead of me with a solution here; it’s a pretty simple one:

1. include navigation in all content;
2. if the content is opened by Thickbox, destroy the navigation.

In the iframed page the following Javascript achieves this:

<script>
if(typeof parent.tb_remove == ‘function’) {
document.getElementById(”nav”).style.display=”none”;
}
</script>

This conditional statement checks the parent window for a function called tb_remove (the function that closes thickbox). If this evaluates to true we can use any dom selectors we like to hide page elements we don’t want to show. If the iframed page is accessed directly either by a real user or a search engine, the navigation will not be destroyed and the page will no longer be orphaned.

See it in action by accessing the first item from the Vietnam War Timeline – May 7th – French defeated at the battle of Dien Bien Phu and then try accessing the same page directly.

A small price to pay for added SEO and usability in Thickbox.

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.

Adding or subtracting time from dates in MySQL.

Often when I work with PayPal subscriptions I have to update a users renewal date on my database by say 6 months etc. MySQL has a very simple way of dealing with this in the INTERVAL statement. For example to add 1 month to todays date you can do this:

SELECT NOW() + INTERVAL 1 MONTH

Conversely to subtract 5 days from the current date do the following:

SELECT NOW() – 5 DAY

Let’s say you want to add a year to a subscribtion by updating the field renewal_date:

UPDATE users SET renewal date = renewal_date + INTERVAL 1 YEAR

There are good few timescales that can be used with INTERVAL including SECOND, MINUTE, DAY, WEEK, MONTH, YEAR.

Formatting dates in MySQL.

MySQL uses the American date format of YYY-MM-DD. I don’t care for it any more than I care for using the property “color” in CSS, but I can’t change it. To change the way a date appears in MySQL, the true power-tool is DATE_FORMAT. This takes 2 arguments: the date you want to format and the new appearance of this date.

For instance:

SELECT DATE_FORMAT(NOW(),’%d/%m/%Y’) as display_date

Would return something like:

display_date=>27/03/2007

Of  course, in this instance PHP’s date() function would be just as easy to use, but when you are dealing with a date from a field DATE_FORMAT is irreplaceable.

A full list of date formatting codes is avaliable in the MySQL Reference Manual.

Calculating the difference between two dates in MySQL

Another simple task when you use the DATEDIFF function. The first argument is the start date, and the second is the date you want to calcuate the difference to or from:

SELECT DATEDIFF(”2007-12-31″,”2007-12-30″)

Gives us a value of 1.

SELECT DATEDIFF(”2007-12-28″,”2007-12-31″)

Give us a value of -3

The results of DATEDIFF are given in days.

Selecting parts of a date in MySQL.

You may want to return a part of a date such as the day that a specific date falls on, or the hour that a task is due on a certain day. There are a number of functions to get specific parts of a date. All you have to do is feed them with a date:

SELECT DAYNAME(”2004-02-13″)

Would return “Friday”

Other useful functions for extracting date parts are:

DAY() – returns the day of the month (e.g 13)
MONTH() – returns the month name
YEAR() – returns the year
WEEK() – returns the week number

Digging Deeper

All the above are very simple techniques that will make your day to day use of dates in your coding more pleasant. However, they are the tip of the iceberg in MySQL date manipulation and should you wish to go further, the MySQL reference manual has a comprehensive section on date functions.

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

Step one: Include the jQuery libraries.

Grab jQuery and jQuery UI libraries.

Include them in the head of your document:
<script type="text/javascript" src="javascripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-ui-personalized-1.5.2.min.js"></script>

Step two: Build a list of items from the database.

Give your list and id – I am using item_list for this tutorial – and then make sure each list item has an id of “item_PRIMARYKEY” where PRIMARYKEY is the key of the item from the database. Here is something similar to the list you should have:


<ul id="item_list" >
<li id="item_1">Item One</li>
<li id="item_2">Item Two</li>
<li id="item_3">Item Three</li>
<li id="item_4">Item Four</li>
</ul>

Step 3: Make the list sortable and add a callback to our database script.

Using jQuery’s onload function or by adding the following script below our list,  inject some javascript into our list to make the list items sortable

$("#item_list").sortable({stop:function(i) {
$.ajax({
type: "GET",
url: "server_items_reorder.php",
data: $("#item_list").sortable("serialize")
});

Let’s look at this line by line so you can understand what is happening.

Line one uses the jQuery selector to target the element with an id of item_list (our unordered list in this case). We then apply the sortable plugin from jQuery UI.

Sortable has a number of options available, but in this case we are going to use the stop option (when sorting has finished) to make an ajax call. The important options in our ajax call are as follows:

• type: the type of call (in this case GET);
• url: (where the ajax post should be made) in this case “server_items_reorder.php”;
• data : the string the makes up our GET call;

The data can be easily built up by using more of the inbuilt functionality of jQuery’s sortable:

$("#item_list").sortable("serialize")

This takes the current order of our list and builds it into an array that can be passed on like a GET string:

item[]=1&item[]=2&item[]=3&item[]=4

jQuery automatically serializes the list item id’s  into this array so you can see why I chose to give them the id item_PRIMARYKEY for the ease offered by convention.

So now we are making a ajax call and padding on the new list order we can write a script to update the database.

Step four: The database script (updating the position).

I am assuming your database table has an extra field called “position” that you can use to hold an integer of each items position as relating to its peers. What we need to do now is create our server_items_reorder.php script to collect the array of items and update the database. Here is that script:

// YOUR DB CONNECTION HERE
foreach($_GET['item'] as $key=>$value) {
mysql_query("UPDATE my_items" SET position = '" . $key . "' WHERE id ='" . $value . "'");
}

This script is simple enough to be written in the language of your choice. It collects the array of items from the GET variable and for each one updates the position based on the id of the item.

That’s all there is to it.

This tutorial is pretty low level as I have written most of these concepts including troubleshooting in my Scriptaculous and Mootools versions of these, so if you experience any difficulties look at those tutorials first, read the user comments and/or post any questions 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.

Requirements:

• jQuery 1.25+
• jtable-effects: minified (1kb) | source(1kb)
  
• Optional complete package of demo files (19kb).

Implementation:

Include the jQuery library and the jtable-effects plugin in the head of your document:

<script type=“text/javascript” src=“javascripts/jquery-1.2.6.min.js”></script>
<script type=“text/javascript” src=“javascripts/jtable-1.0.min.js”></script>

Then call the jTable function for each instance of a table you wish to maniuplate – do this using the onload functionality of jQuery:

<script type=“text/javascript”>
$(document).ready(function(){
jTable(”demo-table”,{stripe:’#EED’,over:’#FC0′,out:’#FFF’});
});
</script>

The first argument is the id of the table body (tbody) to apply the effects to and the second is an array of options available:

• stripe: defines the html colour reference for alternating rows. (hex or rgb).
• over: defines the html colour reference for mouseover. (hex or rgb).
• out: defines the html colour reference for mouseout – this has no effect on the striped rows which return to the value defined by stripe. (hex or rgb).

Finally, a demonstration of jtable effects 1.0 can be seen here and a set of demo files can be downloaded here (19kb).

Please post comments, support requests, bug reports and feature requests for v1.1 in the comments here

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.

1. What is autocompletion and why use it?

I predict that most people will want to skip this section and get straight to the action, so I will keep it brief. Autocompletion is a means of helping your users when filling in forms. The most common application of autocomplete is found in your web browser’s address bar; as you type the bar makes suggestions of URLs based on previous pages visited. In our example we will query a database of musical artists and give our users suggestions as they type in an artist name field.

2. How it works.

As a user types in a specific input field on a form, on each key up event, we use JavaScript to call a script in the background using Ajax (XMLHttpRequest) features built into the Scriptaculous library. Our form will pass the currently typed text to this script and the script will return a list of suggestions which will be dynamically placed in our page. The important thing is that our user can select one of these items by mouse-click or key-stroke to populate the form field instantly.

3. Getting scriptaculous and building the form.

This implementation of autocomplete requires 3 components:

1. The Scriptculous libraries;
2. An HTML form with a single field;
3. An autocomplete server script

I use PHP as my language of choice for the autocomplete server script, but I have tried to keep this tutorial abstract enough to allow you to use your language of choice. The server script is the only thing that changes for different server-side scripting languages. Download the latest version of the Scriptaculous JavaScript Libraries and include them in the head of a new HTML document as below. Don’t forget to change the paths to match your directory structure:

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>

Now add a form to your HTML page’s body. In this form we are going to add a field that will take our search term (with both id and name attributes as “searchterm”) and an empty div with an id of “hint”. This empty div acts as a holder for our hints when they are generated. You should have some HTML looking like this:

<input type="text" name="searchterm" id="searchterm" />
<div id="hint"></div>

All we need now is to initiate a new call to Scriptaculous’ built in Ajax.Autocomplete method below our HTML code for the autocompleter – like this:

<script type="text/javascript">
new Ajax.Autocompleter(”searchterm”,”hint”,”server.php”);
</script>

The Ajax.Autocompleter takes 3 arguments: The element supplying the search string, the element to show suggestions in and the server script that will generate our suggestions. With that in place we can write the server script.

4. Building the autocomplete server.

The following server is written in PHP connecting to a MySQL database but you can your language of choice and even a flat text file or XML file for the suggestion database. My database table, “Artists”, is simple – it comprises a unique id field and an artist “name”.

As the Autocompleter sends the value of a form field as a POST variable, we can use this in our server script’s query againstthe database. All we need to do is output an unordered list for the autocompleter. Scriptaculous does the leg work of inserting the latest list into our hint box everytime the user makes a keystroke. Here is my server code in PHP

<?
// don't forget your database connection here.
echo "<ul>";
$sql = "SELECT * FROM artists WHERE name LIKE '%" . $_POST['searchterm'] . "%'";
$rs = mysql_query($sql);
while($data = mysql_fetch_assoc($rs)) {
echo "<li id=\"" . $data['id'] . "\">" . $data['name'] . "</li>";
}
echo "</ul>";
?>

Note that I have given each list item an id that is the same as that of the record. We will use this shortly for a more advanced technique. But for now we have all we need for a basic autocompleter.

5. Passing back an id to our form

Once a user has selected an item from the autocompleter, the string is entered into the textfield. Often, for the sake of efficiency and accuracy it is better to deal with the id of the item than the string name when it is passed on to the next page. To do this we can use some extra functionality of Ajax.Autocompleter along with some JavaScript that will pass the id to a hidden field in our form.

The first thing we need to add to our form is a hidden field with an id that we can reference:

<input type="hidden" id="artist_id" name="artist_id" />

Now we can use an extra piece of functionality built into Ajax.Autocompleter that allows us to pick up the id that we included in our list item from the server script. This is an extra option on our autocompleter call:

new Ajax.Autocompleter(”searchterm”,”hint”,”server.php”, {afterUpdateElement : getSelectedId});

We are telling our autocompleter to run a function called getSelectedId when an item is selected. All we need to do now is write this function to get the id and inject it into our hidden field. Insert the function below the

function getSelectedId(text, li) {
$('searchterm').value=li.id;
}

And that’s all there is to it. Of course you can be as clever as you want with your autocomplete server script. Try using the LIMIT clause in your SQL to make it run faster. Make your queries more advanced to bring back more specific results. And don’t forget the fun you can have with CSS on your hint div and the list of suggestions that it displays. If you have any implementations of autocompletion using this tutorial, please post them in the comments here.

—————————-

Single ply membrane Products

Why would you want to do this?

Alternating the row colors (sensibly) on tables makes them easier to read. Hard coding styles is easy enough, but when you are bringing rows back dynamically, from a database for example, you can never be sure which row will be where.

Lets say we have an array from the database called $data. Before we iterate over this information, we need to set a variable outside of our loop

$current_row = 0;

Now inside our loop, we need just one line that will alternate our $current_row count between 1 and 0

while( $data = mysql_fetch_array($recordset)) {
$current_row = 1 - $current_row;
... (rest of code goes here)
}

What this does is sets the $current_row variable to 1 or 0 on each pass. The maths is that 1 – 0 = 1 and on the next pass 1 – 1 = 0 ¦ This logic can continue infinitely.

All we need to do now are two things:

1. Set a dynamic class in the opening table row in our loop:
2. Create a class for our alternate row(s) in our CSS:.row1 { background: #eed; }
.row0 { background: #fff; }

Two lines of extra php code, one extra class in your CSS, and you’re done.