Stuff by Sarah

Playing with jQuery

Mon, 30 June, 2008 – 6:42 pm

I've mentioned recently that I've had to start dabbling in AJAX (do we still write this in capitals?) and whilst my work has mixed both the Prototype and jQuery frameworks, I'm trying to learn jQuery and do everything in that so that I can drop Prototype. The main reason being that the jQuery framework is about half the size of Prototype, plus there seems to be more on the subject from what I've seen so far (also the calendar I'm using uses jQuery so it makes sense!).

I'm still on the learning curve, a very steep one at that, and have started at the beginning on Learning jQuery, which has been a good read so far, with clear explanations. I've also implemented a couple of scripts which may be of interest.

The Calendar

I've been working on a form that asks for a date input (amongst a million and one other options!). Initially I gave a drop down but the client came back asking for a popup calendar. As I'd started using Prototype on the site I was working on, I purposely went out and found a calendar that also worked on this. That was fine until the client complained that you could selected a date in the past. As this is for making bookings he wanted it to only accept present and future dates. Of course the PHP checked this, but he didn't want to have to submit the form to be told the date was invalid. That wasn't so hard, except then I was told that some options would also require the earliest date to be 2 days into the future. So I needed not only a calendar that would restrict the date on load, but also dynamically change depending on which options had been selected.

After a chat with a friend he pointed me in the direction of the UI Datepicker, which seemed to do everything I needed and more. It's taken a fair bit of playing and testing to combine the various demos together, but I've finally got it working exactly how I need it. On load it displays the available dates from 'today' onwards. Then on selecting certain options, this changes to perhaps from 'tomorrow' onwards or in two days time onwards. Certainly not standard requirements but definitely handy to have a good calendar that can deal with that.

Tabs

On another site I needed to get a tab system in place to allow more content on a page without overwhelming the visitor with it all on display. I looked at Dom Tabs and at first they seemed to do exactly what I needed, until I had to add in headers around each list item. That stopped everything from working, so a quick search for a new tab system found UI Tabs where you can see some great demos.

I've had a fair few fun and games with these. I originally found version 2 of the tabs, got them all working and then realised that they had come with an old version of jQuery (1.1.3 when 1.2.6 is available) and the next day I discovered the latest version! So I set about trying to get the latest version working but getting a download of the latest version just wasn't as easy or obvious. So today I went through the demo site, visited every page linked to, copied the source and got it working locally and then slowly transferred the content over to the site. Eventually I got it all running off the latest version of jQuery!

Lightbox

Finally, once I finally got the latest version of jQuery running, I could upgrade the lightbox script to prettyPhoto. This was relatively simple to add in, except that the gallery method creates a slot for every image linked, regardless of whether it's already been linked to. In the old lightbox it could detect this. For example, you have 3 images, and they also have a title/name below them. So you can click on the image or the name and get a larger view of the image. With the old lightbox it could detect this and just show you 3 large images in the gallery, but in this new script it shows 6 images, duplicating each one twice. Even if I set the 3 thumbnails to use gallery1 and the 3 titles to gallery2, it seems to note that there's only 3 images in the gallery but still goes by the order on the page in which the links are listed, and not by the gallery name.

Anyhow, small issues which are now irrelevant, as the site owner has changed his mind and picked a whole other lightbox script!

Prototype to jQuery

The main site I've been working on, which currently has both frameworks loading, requires just one other job moving over, which I've yet to learn. This is how to run a PHP file and subsequently write the result from that into a div or paragraph. I think the rest of my JavaScript is standard stuff and doesn't require either framework to run, and simply uses the DOM. So once I can work out this, probably simple, job then I can ditch prototype altogether.

Any other resources of learning for jQuery are welcomed. I may look at books at some point, but considering my ever growing library of unread books, an online resource may be looked at more initially!

• Bookmark this page at:
• Del.icio.us -
• StumbleUpon -
• Spurl