My Conversion to JQuery

I have been using JQuery on a regular basis for the past 6 months or so. Before this I had been of the opinion that I didn’t need JQuery to do what I wanted to do with JavaScript but when I started my new job I was working on sites that had been built with JQuery and I quickly realised the best thing I could do was to go with it.

After over coming the first basic learning curb I started to understand that JQuery was saving me a hell of a lot of time. I had written my own JavaScript animations before and they served there purpose and worked quite well. The problem is that I could spend hours trying to fine tune my animation loops to get the perfect transition but as the only front-end Developer in a company that turns over on average 2-3 website a month time is not something I have in abundance.
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…

<div class=”content holder”>
      <table class=”content”>
            This table will not be visible when the page loads
     <div class=”tablefoot”>
           <a href=”#” class=”showlink”>Show Content<a>

Next, the 2 lines of JQuery that handle the selection…

var parentDiv= jQuery(this).parents(‘.tablefoot’);                                jQuery(parentDiv).prev(‘.content’).slideToggle(0);

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…