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!

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.

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