Packt Publishing were kind enough to send me a copy of the jQuery 1.4 Reference Guide, by Jonathan Chaffer and Karl Swedberg. The book is intended to be a comprehensive reference for the library, aimed at intermediate to advanced readers.

The first point I should make about this book is that it is not intended for users who are new to the jQuery library – this is not a book full of tutorials. If that’s what you’re looking for, you should check out Learning jQuery 1.3 instead, by the same authors.

The book is organised into eleven chapters, covering (amongst other things) selectors, DOM traversal and manipulation, events, effects, and AJAX. The whole library is covered (as you would expect from a reference guide).

Each method in the library has its parameters documented. This is surprisingly helpful – many jQuery methods can be overloaded for various purposes, and this feature of the book is a great help towards learning the possibilities of each method. In fact, one of the take-home points for me was that many methods now support anonymous functions as parameters, offering lots of flexibility.

Next, a bare bones code sample is shown to demonstrate the method. It is followed  by an explanation of the code sample, along with any ‘gotchas’ or quirks that you might experience. Multiple examples of code are shown where there might be different ways to use a particular method. The book really is quite exhaustive, and from that point of view offers great value for money.

Although this book works really well as a reference book, the surprise for me was that it didn’t just work well as a reference book. Reading through the book, I picked up a lot of hints and tips that will almost certainly change how I use jQuery. For example, I realised that my knowledge of selectors was sorely lacking. (Partly this was because I’d never bothered to learn the CSS3 selectors properly, but jQuery gives me a reason!)

Another excellent chapter for me was the last one, regarding plug in architecture. The structure of this chapter was a little different, basically walking the reader through the process of creating various types of plugin. Like the best technical books, this chapter actually inspired me to put the book down and write some code – surely a sign that it was doing its job properly!

It’s worthwhile to note that if you are considering purchasing a copy of this book, Packt will make a contribution to the jQuery project for every copy sold; so in buying this book, you’ll increase your own knowledge, and you’ll be directly helping the jQuery project too. For me, that’s one of the best reasons to buy.

I recently finished reading Dan Wellman‘s book, jQuery UI 1.7 – The User Interface Library for jQuery. But with the imminent realease of version 1.8 of the popular interface library, is this book still relevant? In my opinion,  it is.

This book is recommended for beginner to intermediate users of jQuery UI, and it hits the mark perfectly for its intended audience. There’s a chapter for each of the high and low level widgets, as well as the CSS and effects frameworks. Each chapter is structured to follow a logical pattern, and Dan’s clear writing style means that the code and text is easy to follow.

Each chapter starts with a basic example, and gradually adds more and more options to show the flexibility and power of the framework. The text is supported by numerous code samples, which can be downloaded from Packt Publishing‘s support site. Finally, each chapter ends with an imaginative, more advanced use of the library. One chapter showcases jQuery UI’s drag and drop functionality with a game, for example. These examples really bring the code to life, and inspire you to open your favourite text editor and start coding!

The most obvious omission from this book (in fact, the only one worth mentioning, really) is the lack of a section on writing your own plugins for jQuery UI. Dan obviously feels the same way, because he’s written a tutorial on the subject here, and something like this is promised for the next update of the book. If this more advanced topic is something that interests you, you might want to wait for the next version of the book.

Alternatively, if your knowledge of jQuery UI is at the other end of the spectrum, there’s no reason at all not to go ahead and buy the current version. The book focuses on the common features of each widget (for example the destroy, enable, and disable methods) so that you can easily adapt to the new components as they appear.

If you’re somewhere between the two camps, as I was, then this book will consolidate your knowledge and give you lots of inspiration to use the parts of the library you might not have touched on yet. And that, for me, was worth the cover price alone.

One of the things I missed when switching from Prototype to jQuery was the former’s Ajax.PeriodicalUpdater function. It is used to provide a ‘decay’ mechanism for ajax calls, making them less and less frequent if the retrieved content doesn’t change inbetween calls.

It can be a seriously useful piece of functionality. I took a chatroom that was polling every second and using an entire CPU core (50% usage!) and reduced it to 2-3% using this method. There were also errors retrieving content because sometimes the responses would take longer than a second to come back!

The problem is, there really isn’t a similar piece of functionality in jQuery.

So here it is! The script checks the returned data against previously received data, and increases the time between calls if it hasn’t changed.

I’d be interested in your comments. Would it be useful to turn this into a plugin?

View the demonstration here.

Steve Reynolds recently wrote a blog post showing how to access the twitter search API using PHP, cURL, and JQuery.

Steve used JQuery to post to a page on his server, which then cURLed in search results for a given term. This approach is often necessary to get avoid the issue of cross domain ajax calls.

While this approach works well, there’s an even easier way to go about it – $.getJSON!

There are two main advantages to this approach:

• Server side technology isn’t an issue. You don’t have to rely on PHP, cURL, firewalls, anything like that. It will even work on a static HTML page!
• All the work is done on the client’s browser – saving precious bandwidth! This could be important on busy sites.

I’ve knocked up a quick-and-dirty demonstration of this concept. If a name doesn’t already exist for this methodology, my vote goes for JAJA (Javascript and JSON, asynchronous!)

View the demonstration here!

I was recently involved in a project where there were two multi-select lists involved, with a big number of options – around 300 in each.

These things are a usability nightmare:

• The user has to ctrl-click to select multiple options (‘where’s the central key?’)
• A stray click will unselect everything already selected (Critically important on a site sign-up form)
• They are just plain ugly

So the workarounds I’ve been trialling?

Jquery multiselect plugin – Very nice plugin that solves all three of the problems above. One problem however – it was taking over a minute for my page to load in Firefox!

Interestingly, Chrome displayed the page in under 5 seconds. Guess that new javascript engine is a fast as they say…

Half-assed Jquery solution I cobbled together for fun – This lets the user use a single click instead of a control click on multi-select lists. Solves problem one and two, problem three would still need someone with more artistic leanings working on it. Oh, and it doesn’t work in IE. Told you it was half-assed.

Current favourite option – A div with overflow hidden, full of checkboxes. Sort of solves the main problems, but still not ideal.

How would you deal with this interface problem? I’d love to hear your suggestions.

Yahoo have a hard time fighting off the image of being bridesmaid to Google’s bride. However, they have a decided knack for turning out really cool developer toys! For example, check out the Yahoo User Interface library, Yahoo Pipes, or their latest baby, Yahoo BOSS.

Short for ‘Build your Own Search Service’, Yahoo have pretty much opened up their entire search service via an API. With an unrestricted number of queries, and complete control over presentation of results, you can really go to town with this one!

Getting started is easy; simply get yourself an API key here. Go on, I’ll wait.

With that done, anyone with basic knowledge of PHP and JQuery can easily build a search application!

Check out my demonstration here.

There are two pages involved in this demonstration. The first page displays the form, and contains the necessary JQuery code to fire off an AJAX request to the second page. The second page takes the posted value, fires off a request to the API, and returns the result.

Without further ado, here’s the JQuery:

    $(document).ready(function(){
      $('#results').hide();

      $('#search').click(function(){
        $('#results').hide();
        searchterm = $('#searchterm').val();
        $.post('getresult.php', {query: searchterm}, function(data){
          $('#results').html(data).show('slow');
        });
      })
    })

The code in ‘getresult.php’ isn’t much more complex; you can see it here.

That’s all there is to it! (At least for this very basic example.)

Once again, you can see a demonstration here.

I’m sure there must be loads of ideas for mashups out there; let’s hear some of your thoughts!

I’ve had some fun this weekend tinkering with Jquery. It’s taken me a long time to get round to playing with this library, having thrown my eggs in the Prototype / Scriptaculous basket, but after some experimentation, I wish I’d done it sooner!

I have to admit; the syntax is nicer, much simpler (no more $$(‘selector’)) and the documentation seems better. Jquery is also lightweight and fast.

To celebrate my switchover, here’s a very simple Jquery menu demonstration!

Let’s start off with the HTML:

<div id="”content”">
<ul id="”menu”">
  <li class="”starter”&gt;menu"></li>
  <li><a href="”#”">home</a></li>
  <li><a href="”#”">about us</a></li>
  <li>a href=”#”&gt;portfolio</li>
  <li><a href="”#”">contact us</a></li>
</ul>
</div>

$(document).ready(function(){
  $("li:not(:first)").hide();

  $("li.starter").click(function(){
    if($("li:not(:first)").is(":visible")){
        $("li:not(:first)").fadeOut("fast");
    }else{
        $("li:not(:first)").fadeIn("fast");
    }
  })
})

$(document).ready(function(){

$("li:not(:first)").hide();

$("li.starter").click(function(){

if($("li:not(:first)").is(":visible")){
    $("li:not(:first)").fadeOut("fast");
}else{
    $("li:not(:first)").fadeIn("fast");
}

You can see the full demonstration here, with comments!