Thickbox 3.1 with jQuery 1.3 – Stuck on loading image.

Thickbox hasn’t been updated in a while, and it is now incompatible with recent versions of jQuery (1.3+). What happens is that when you click the thickboxed element, the screen goes gray and the the loading “barber pole” image loads as expected, but then nothing happens… it just hangs on the loading image. The reason why is because Thickbox uses ‘@’ in jQuery, which is now deprecated.

To fix, simply open up the un-compressed thickbox.js file and go to line 79 and change the following:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

… into …

TB_TempArray = $("a[rel="+imageGroup+"]").get();

Once you make that change, Thickbox should work as expected!


jQuery: using jquery.autocomplete.js plugin in noConflict mode

When attempting to implement Dylan Verheul’s excellent auto-complete jQuery plugin on a project, I ran into problems due to the fact that we are using noConflict mode for jQuery by calling noConflict(); A few quick minutes poking around jquery.autocomplete.js and I had updated it to work in both noConflict and standard modes. For those of you looking to use jquery.autocomplete.js in noConflict mode, I’ve made it available for download here: jquery.autocomplete.js

UPDATE: Dylan has updated jquery.autocomplete.js to be compatible with noConflict mode. It also contains additional bug-fixes and improvements. You can download it at:

Now playing: AFX – SteppingFilter 101
via FoxyTunes

jQuery: How to set one <select> element to the value of another (using onchange equivalent)

Say you have an HTML <select> form element and you want to set another <select> element equal to the first one when it changes. Here’s an easy way to do so with jQuery:

$('#id_of_select1').change(function() {
    var select1_value = $(this).val();

Now playing: Drexciya – Astronomical Guidepost
via FoxyTunes

jQuery: How to get the ID of an element.

Say you want to know the ID of an element using jQuery. You can achieve this easily using jQuery’s attr() method:

var currentId = $('#element').attr('id');

But this is fairly useless, because it requires you to already know the ID of the element that you want. Usually you’ll want to find out the ID if you don’t already know it — given a jQuery ‘this‘ object:

var currentId = $(this).attr('id');

This will only work provided that you have a valid jQuery object $(this) that you are working with, eg:

$(document).ready(function() {
  $('input.text').focus(function() {
    $('input.text').removeClass('onFocus'); /* remove focus state from all input elements */
    $(this).addClass('onFocus'); /* add focus state to currently clicked element */
    var currentId = $(this).attr('id');

Using the code above, you will now know the ID of the currently focused input element. This can come in handy later on if you want to perform further actions on the element.

Now playing: Amon Tobin – Precursor (feat. Quadraceptor)
via FoxyTunes