jQuery Parallax: In action

A lot of the traffic I get to this blog is related to the jQuery Parallax script I wrote quite some time ago. Looking at the code now, I don’t think I’d change too much about it, perhaps use .on('mousemouse', ...) instead of .mousemove(), but mostly it seems to serve it’s function quite well. Since the only real functions being called are .mousemove() and .css() it should still be working with the latest versions of jQuery and unless they decide to majorly change the API, it should continue to work too!

Since my example was on a fairly empty page, I thought I’d link to a couple of sites that are using it in the real world:

If you’re using the script and think your sites is a good example of utilising the parallax effect, please leave me a message!

jQuery Ajaxify Lite

I’ve been using the ajaxify plugin for a while now and felt it needed an update.

Since .live() is supported for more events now, I thought it was time to get it working how I always wanted it to work.

Using the same syntax on links as before, you can specify the target div, using the target=”” attribute and the url is automatically extracted from the href=”” or action=”” attribute meaning you can keep your code simple and valid but have easily Ajax populated content, as since I’m using .live() any future links/forms that match the original selector will continue to be ‘ajaxified’.

There’s a demo here and source code too, as ever.

Also available through Google Code.

jQuery – Persistent Input Labels

Do you forget whats supposed to go in the field the second you tab onto it?

Are you concerned your users will too?

Never fear! This simple plugin places an element of the same type underneath the current element and shows the contents of the title attribute (or whatever attribute you decide to use) as a label until you type text into the box!

It’s a very early version, and probably has a few bugs, but I’ve implemented enough to make it fairly useful I think. Unfortunately when you resize a textarea in webkit, it doesn’r fire the resize event, so I’ve added a workaround using mousemove (I tried to only capture mousemove if a mousedown had been detected, but to no avail…)

You can see a demo here, and get the files here.

Dropdownify – Minimal effort dropdown

So recently I was asked to change a navigation style of an existing site to drop-down menus.

Simple, I thought, just use one of the many existing drop-down plugins. I tried many, but most seemed to use hardcoded styles and I had a few problems (some of which I encountered again, writing this).

So I’ve made this, I think it’s fairly robust, but I’m sure there’ll be problems with embedded objects (flash) and select boxes (in <= IE6), but for my needs, it sufficed, so I thought I'd share, in case anyone else needs a simple script to manage drop-downs. To use, create a nest of elements like this:

or something similar (any elements, should work) and call:

Which should create a simple drop-down.

There are a couple of examples, one for jQuery and one for mootools, and the files can downloaded here and here.

I did encounter a problem with IE, mainly due to z-index faults, so with HTML code like the following:

I used the following CSS:

jQuery Ajaxify – Update

I’ve been doing more work on the jQuery AJAXify plugin, it’s now a lot more robust (I think…) and I’ve squashed a few bugs that were in the previous version (with help from Andrea Battaglia) along with adding in a few new features (with their own bugs no doubt!).

Theres an updated test page and as ever a direct link to download here.

Check out the test page to see the new features!

Edit: Further updates, all links have been updated to version 0.3b. Added (and documented existing) callbacks as requested by Sebioff! And a further fix for the ‘append’ option. Also fixed IE6 compatibility.

Further Update: Another update after the comment from David Lee about $(‘form’).serialize();

Another Further Update: I have set up a Google Code repository for this plugin, which states that this code is released under the MIT license.

Update October 2010: I have updated this plugin for jQuery 1.4.3 as a ‘lite’ version.

jQuery Ajaxify

Probably not the first person to implement this, but I wanted to make an automatic form AJAX-‘ifier’ that could capture which submit button had caused the submit event to be fired too.

It’s implemented fairly simply:

There’s a demo page or you can just download it and have a look.

Update: As pointed out by Andrea in the comments below, this would return the value of radio and checkboxes even if they weren’t selected. I have released 0.1a and updated the link above to fix this issue. Thanks Andrea!

Update 2: I have updated this plugin, view this post for more information.

Update October 2010: I have updated this plugin for jQuery 1.4.3 as a ‘lite’ version.

jQuery addCaptions 0.2 – Minor update

I’ve been using the jQuery addCaptions plugin and have come across a couple of new features that I felt were required and have fixed a bug in the previous verison.

I have added an exclude option to the settings so you can prevent captions being added to elements not required (like a reCaptcha box…). It’s used like this:

This would exclude any images that have the word ‘orange’ in the the alt attribute.

I also fixed a minor bug in which the script would look for captions in elements in reverse order (whoops!).

The only other change is making the elements found within the container a selector instead of an element option and a class option.

There is an updated demo here, or you can just download the script here.