Musings

The jQuery ui is essentially a set of pre built, ready to use JavaScript widgets based (obviously) on the jQuery framework. They can be really useful straight out of the box, or as the foundation for something more complex, and they also come packaged with a decent set of CSS themes.

According to Dan Wellman himself, his book is written for…

…front end designers and developers who need to quickly learn how to use the jQuery UI library. To get the most out of this book you should have a good working knowledge of HTML, CSS and JavaScript ,and will need to be comfortable using jQuery, the underlying foundation of the jQuery UI.

Continue reading...

Dan Wellman has just launched his new book about the jQuery UI and his publishers have sent me a copy to review. I’ll have more on that later, but I’m certainly looking forward to reading it; here’s how he describes the book

An example-based approach leads you step-by-step through the implementation and customization of each library component and its associated resources in turn. To emphasize the way that jQuery UI takes the difficulty out of user interface design and implementation, each chapter ends with a `fun with’ section that puts together what you’ve learned throughout the chapter to make a usable and fun page. In these sections you’ll often get to experiment with the latest associated technologies like AJAX and JSON.

I really like the idea of the ‘fun with’ sections, quite often the biggest barrier to absorbing a text book is the tedium of the examples.

Continue reading...

This tutorial will show you how to build an text input that will give autocomplete / auto suggestions via AJAX straight from an ExpressionEngine template then redirect straight to the entry. It could be used for searching, or shortcuts to particular entries, I have it working for the latter on a recent project. It will allow you to …

1. Start typing parts of an entry
2. Scroll through the autocompleted suggestions that pop up
3. Click one (or use the keyboard shortcuts)
4. Get redirected to the relevant entry on the relevant page

• View the demo here
• Download the template files here

Continue reading...

There are many live chat apps out there, and they’re mostly very expensive. Good old Google have of course created a live chat functionality, but not particularly advertised it. In fact you have to do a little searching and wrangling to get it to work properly for you.

In this tutorial I’ll show you how to

1. Integrate the Google Talk / Live Chat functionality into your own website
2. Customise the visuals for if you’re on or offline
3. Display the chat window on your own site with a nice lightbox plugin

Continue reading...

I’ve had a lot of response to the jQuery sortable list post I wrote a while back, and a lot of them ask how to send the results to a database. I’ve often said the best thing to do would be to update it by AJAX, but I’ve never really explained how. So here it is!

• You can see the demo here
• And download the source code here

Continue reading...

this post has been extended in the new Extending the jQuery Sortable With Ajax & MYSQL post

I’ve recently made use of a drag / drop style list that will remember the order of the list. If you use the standard jQuery sortable items, you’ll get the two following problems:

1. You won’t be able to click on any items in the sortable list you have
2. You’ll probably want an update of the order of the list after every change.

I did find a solution to the problem over at Scott Sauyet’s site, but I needed a little more… The following example will do both, it uses the handle and update options on the .sortable item. By adding these simple items you can produce a pretty advanced sortable list. You could even add AJAX into that update command and automatically update your database with the new values every time you change then removing the need to refresh, and that’s very web 2.0.

DEMO AND SOURCE HAVE MOVED TO THE NEW POST

Continue reading...