1. TUTORIAL
Using Javascript based on libraries such as jQuery
Introduction
Hammerkit makes it really easy to use Javascript such as the extensive libraries within
jQuery to add great effects, interaction and to improve the usability of the site. Hammerkit
supports jQuery by default, but this lesson be applied to any of the other popular libraries,
such as MooTools.
Adding Javascript in HammerKit is a 5 step process and we will step through it and help
you to understand just how you can start to add some of that jQuery goodness.
Objective
At the end of this tutorial, you will be able to add functioning javascript without the need to
really know how to programme.
To test this, just create a new blank component and follow the steps below.
Step 1 - Find the Zip file with the code
Locate the function you want to add to your site. For the purposes of this tutorial, we are
going to use a great piece of third party code that was created to embed your Twitter feed
in your site by Coda. You can read about the jQueary plugin here:
http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter
Go this page and download the zip file to your computer. This contains the files you need
to add to Hammerkit to get the plugin working. This is fairly usual, so when you locate
some plugin or cool javascript, look to see if they have created a single zip file.
NOTE: Trying to find the Zip file works most of the time... But sometimes the coders
haven't been "nice enough" to provide all files in zip-file (this is rare though)... If this is the
case it might be necessary to locate files separately.
The zip file for this exercise is here:
jQuery Twitter Plugin
Download this and unzip it to a directory as we are about to use it in step 2.
Tutorial: Usng Javascript v1.0 28.7.2009

2. Step 2 - Add the CSS file
Open your new component and click on the module button to add a new module
element to the page. From the Select Module drop-down, choose the CSS module.
Once you have done this, leave the mode as “include CSS stylesheet file” and then browse
and attach the CSS file from the Zip file you downloaded. It might be a good idea to create
a new folder to store all of your CSS files in one place, so create the CSS directory and
upload the file there.
GOOD PRACTICE TIP: If you are using a lot of jquery widgets, it might be a
good idea to create a folder jquery and then sub-folders to hold all of the files
from the zip files. You can import the Zip file to import the whole folder at
once. Just tick the box “Unpack archive file” and HammerKit will upload the
Zip and unpack the contents to the destination folder you specify.
In this case the file is called jquery.twitter.css
This CSS file can be modified to suit later, For now, lets move on to Step 3.
Step 3 - Add the .js file
Once again add a new module by clicking the module button. This time, choose javascript
as the module type from the Select Module drop-down box. Leave the mode set as “Include
javascript library file” and then choose the .js file from the Zip file you downloaded. In this
case the file is called jquery.twitter.js
Now you should have just two elements on the screen, the CSS element and the Javascript
include as shown above. (ignore the 2296 - this is an element reference code and will be
different in your view).
Tutorial: Usng Javascript v1.0 28.7.2009

3. NOTE - there may be more than one .js file to add to the component, so you may need to
repeat this step if there are a more.
Now we can add the div to ensure we can position the feed box.
Step 4 - Add the div
To add the div, simply select the text element, click the plain text checkboxand paste
the div code copied from the coda site:
<div id="twitter"></div>
NOTE: It is really important to click the plain text checkbox. This ensures your code is
copied in correctly without any of the formatting from the destination you have copied
from.
Now click done. Thats all there is to adding the div.
Step 5 - Add the script
The final thing to do is to copy the script from the site and add it as a piece of Javascript.
To do this add a new module element and select Javascript as in Step 3. Set the mode to
“Add head javascript code” and paste in the script from the coda site as below:
Tutorial: Usng Javascript v1.0 28.7.2009

4. In this case, we want to show the Twitter feed from the HammerKit account, so we just
change the username to “hammerkit” and click done.
Now click the save component button and then select view page from the component
menu.
Your finished Twitter feed box should look like this:
Tutorial: Usng Javascript v1.0 28.7.2009

5. Five Steps to Adding Javascript elements
So, to summarise:
1. download the Zip file with the required files
2. add the CSS file using the CSS module element
3. add the javascript file using the Javascript module element
4. add the div
5. add the script
If you have any questions about this, or would like some help, post your
question on designer.hammerkit.com and one of the team will assist you.
Tutorial: Usng Javascript v1.0 28.7.2009