Archive for the ‘jquery’ Category

Dan Wellman’s jQuery UI 1.7 reviewed

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.

Posted by admin on March 9th, 2010 No Comments

Converting Prototype’s Ajax.PeriodicalUpdater to jQuery

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.

Posted by admin on February 18th, 2009 8 Comments

Using JSON to access the Twitter search API

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!

Posted by admin on February 7th, 2009 10 Comments

Select multi lists suck!

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.

Posted by admin on November 28th, 2008 2 Comments

Toawema goes live!

We’ve just put the finishing touches on Toawema, a brand new prize draw website!

We used Codeigniter, with JQuery for the UI.

Using Codeigniter was a dream. It’s well known for its speed and lightweight footprint, but there are at least three other advantages that really sold it to me.

Firstly, there’s a huge amount of flexibility compared to other frameworks. Works with almost any host, and any PHP version going back to 4.3.2. No command line jiggery-pokery needed to get it going. Completely open source, so you can hack away at the core to your heart’s content (or better, extend it.)

In fact, it is so flexible that you don’t even need to comply with the MVC design pattern – you could, if you wanted to, completely ditch the model and work only with controllers and views. There’s no restrictive naming conventions, or anything like that.

Secondly, the community is very active and helpful. Although I had a couple of minor issues throughout the development, the forum contained all the information I needed. I never had to ask a single question.

Lastly, Codeigniter has commercial backing in the shape of EllisLab. The future of Codeigniter looks really bright. In fact, 1.7 was released the day Toawema went live (thanks guys, it could’ve saved a ton of coding on the forms!)

Codeigniter is a fantastic product, and I can’t recommend it highly enough for anyone looking at PHP frameworks. I can’t wait to check out ExpressionEngine next!

Posted by admin on November 4th, 2008 1 Comment