The right JQuery plug-in can give nice fluid transition in image sliders and drop downs that can be tweaked to perfection if desired but also look pretty slick out of the box.
A couple of weeks ago I really got to see the full power of Jquery. I was handed a design for a homepage. This page featured four boxes with that would pop open when the user clicks the “see more” link in the bottom left hand corner of the box. I was determined to do this with as much code reuse as possible as I knew it would be something that I would be asked to do again. Also, not knowing how many boxes would appear on the page meant that using there unique IDs to target them individually would be quite ham-fisted and not very upgrade friendly should more boxes be required in future. So the divs(boxes) would have to be targeted by class. That way you could add as many boxes as you like and they would all act in the same manner.
So now I had a link that would be selected via its class, the function called would then show/hide a table above it all within a div that would expand once the table was visible.
To make this happen I would need to use JQuery’s this keyword to ensure that only the box clicked would open and not all boxes that used the class on the page.
The next challenge was to display the table above the link. This would requires some serious DOM tree traversal. Luckily JQuery has seriously powerful selectors that can make this happen. It required not one but 2 of these selectors to target the desired table and set it be visible. My DOM tree looks like this…
Next, the 2 lines of JQuery that handle the selection…
The first line uses the .parents selector to locate the div with class .tablefoot in a list of parent element of the current div. This is then saved as parentDiv so it can be operated on further.
Now that this is selected to us the .prev selector is used to locate the .content table from a list of previous elements on the page that are located on the same level in the DOM tree (This could also be thought of as a list of siblings, but only “younger siblings” or one that appear on the page before our current element).
BOOM we have located the table and now it time to show this mother using the .slidetoggle() method.
A few more lines of JQuery were used to change the text in the link to “close” when the box is open and change back to “show” when it is closed.
So that’s how I did it. It’s a few lines of JQuery that I will definitely be using again. If you have read this far I hope I explained it well and you understood it. There are heaps of resources on the JQuery website if your looking for some more light reading.
Next time… Front-end dev for Safari on the iPad! Somethings to take into account…