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…

Leaf Blower

In October 2009 I received a project spec. To build a 2D game for iPod Touch. I was assigned to partners to work on this project with me. 
This would require coming up with a game concept and implementing it using Xcode’s iPhone OS3 SDK. At the time I only had limited experience with C programing and not even the faintest clue as to how Object Orientated Programing worked. With iPhone OS programing done mostly in objective C, I knew we had a lot to do. For the first 3 or 4 months we  played with different ideas and researched our options. Then in February 2010 I received the news that my 2 partners had dropped out. With loads left to do and only a brief outline of what the game was going to be I consulted my project supervisor who suggested to going down the path of producing a web application. Something which the iPhone OS is ideally suited to. He handed me a book called Safari and Webkit Development for iPhone OS 3 which proved to be invaluable.
And so I began. With my partners out of the picture I changed the planned game! The original idea of snakes and ladders was chosen because it seems as though it would be easy to implement. The new game would have to be something that would use JavaScript animation to manipulate images on the screen. These images would be placed in named div tags which could be moved around the screen my mean of JavaScript animation loops. I came up with the simple idea of a game where a leaf blower was used to steer falling leafs on to a pile. The game would then time how long it takes the user to put 10 falling leafs on the pile before advancing to the 2nd level where….wait for it, they are confronted with the daunting challenge of two leafs falling at the same time with a target of 15 leafs to collect. Once this is done the user is presented with there final time for both levels. 
The game serves as a proof of concept. The game can be played at this link and works best on safari for Mac/ Windows or mobile safari on iPhone/iPad/iPod Touch. 
My full and final report can be viewed here (right click and save, .docx format). It includes all the code and graphics used and explains how to do it yourself. There are certain features which I was unable to implement, for different reasons, such a HTML5 offline cacheing. I also had a look at , a website that offers tools to allow developers to port web application to run natively in several different mobile platforms, including android, iPhone OS and blackberry.
Have a look at the game, take a gander at the source code, download the report for more info. Anymore questions feel free to contact me at
See ya later!!