They approached us to transform their visually striking design for the upcoming digital DIBI conference into an XHTML/CSS compliant WordPress site. Apart from the typical integration tasks there were a handful of special features they wanted to try and push forward:

• Countdown to the Big Day: We were asked if we would be able to create a countdown timer showing the number of weeks, days, hours and minutes left to go before the DIBI conference begins on April 28th 2010. We came up with a solution using Javascript which updates on the page without the need to refresh.
• Smooth Animated Buttons: Another feature that was requested was to make a number of submit buttons and links animate. Simple jQuery was used to deliver a smooth transition on the buttons.
• Newsletter Signup and Mailing List Integration: We were asked to develop a newsletter signup form which upon successful submission would dissolve and show a “thank you” message to the user. We also integrated the signup form with the Codeworks mailing list software to automatically add names and email addresses.
• Sexy Web Fonts!: Codeworks didn’t want to settle for the typical standard web fonts. We used CSS font-face and drop-shadow to enhance fonts across the site and deliver more of an impact.
• Dynamic Twitter Feed: Codeworks wanted to be able to highlight the Twitter discussions regarding DIBI throughout the site. We integrated twitter.com’s own TWTR widget which elegantly displays and animates the feed live to the user.
• Back to the Top: Hidden away in the footer of the site is a nifty little “back-to-top” button for when you’ve read your way down to the bottom of the page. Clicking it will scroll you up gently rather than the jump action often seen on other sites.

At the request of the client, the site was turned around quickly and since its launch has been a huge success – featuring on many of the top website design review sites including http://hotcssdesign.com/, http://www.mostinspired.com/, http://cssmania.com/ and http://www.designfridge.co.uk/.

The site was designed was by Kino Creative, one of the many talented design agencies we have collaborated with.

After receiving the logo we discussed a number of different site design concepts. The client wanted to achieve a high-profile status in the marketplace and place emphasis on her product line. We designed and developed a bespoke e-commerce and content management system to give the them the most effective way of showcasing her work whilst allowing users to easily browse and purchase items on the site.

He needed a portfolio site with the ability to upload examples of his performances, post gig dates and manage his own site content easily. We put together a WordPress site for Ben and helped him choose and install a number of suitable WordPress plugins. We also conducted basic search engine optimisation work which helped get the site indexed highly in major search engines for specific key phrases.

We knocked together a WordPress site using a suitable theme chosen from WooThemes. We had to make sure it was visually appealing and had all of the features he required including Flickr, YouTube and Twitter integration.

The client required a website with a user-friendly content management system through which they could upload information about their services and add latest news about the business and the construction industry. We setup a WordPress site for A+ Skills and provided training on how to use the systsem. Additionally, we integrated a course search facility allowing site visitors to search through the extensive list of courses that they provide.

jQuery is a Javascript framework which allows normally complex Javascript operations to be performed very easily (and often in a single line of code). The secret to jQuery is the selector ‘$’. In the (not-so) olden days, front-end web developers had to use the document.getElementById() function in order to grab and manipulate an element on an HTML page. So for example, if you wanted to insert some text within a <div> tag on a page, you would first of all have to give the <div> tag an id e.g.:

<div id="mydiv"></div>

and then use the following Javascript:

var mydiv = document.getElementById("mydiv");
mydiv.innerText = "Hello world!";

If you add this and the <div id=”mydiv”></div> element to one of your pages you should see the string “Hello world!” appear inside the <div> tag whenever the page is loaded.

Doesn’t seem that hard really does it? What if you wanted to add the string “Hello world!” to every <div> tag on your page? To do this would require using the document.getElementsByTagName() function. You would then have to loop through each element and insert the text on each iteration of the loop e.g.:

var array_of_divs = document.getElementsByTagName("div");
for(i=0; i<array_of_divs.length; i++)
{
    array_of_divs[i].innerText = "Hello world!";
}

That’s 5 lines of code (including braces). With jQuery this can be done in a single line of code:

$("div").text("Hello world!");

The first part of that line $(“div”) is the selector. It basically means get every <div> element on the page and what follows it is just one of many functions that can be used. For example you could have used something like this:

$("div").fadeOut();

As the function name suggests, this will cause all <div> elements on the page to fade out. Doing something like this without jQuery would take a whole lot of Javascript code and an advanced understanding of the language.

Another nice feature of jQuery is chaining functions together. Taking the above example, I can add the string “Hello world!” to all my <div> tags and make them fade out in a single line of code using jQuery:

$("div").text("Hello world!").fadeOut();

That is pretty damn cool. Let’s get on to a practical example.

The first thing you will want to do is create a page in your favourite web dev tool and preferably on a development domain if you have one handy. I’ve created a file named “index.html”.

In this page, make sure you have the standard HTML blocks e.g.:

<html>
<head>
<title>My test page</title>
</head>
<body>
</body>
</html>

The next thing we need to do to this page is load up the jQuery framework. The quickest way to do this is by using a hosted version of the lib which means you don’t have to download the jQuery files and upload them to your test server. I normally link to Google Ajax Libraries. Your <head> block should now look something like this:

<html>
<head>
<title>My test page</title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/main.js"></script>
</head>
<body>
</body>
</html>

You can see in the above code that I’ve added another line linking to a file named “main.js” within a folder named “js”. It’s a good idea to keep your Javascript separate from your HTML as it not only makes your code more readable but also allows you to re-use the code across your entire site and if you need to make any changes to the Javascript, you only have to do it one place.

In my “js/main.js” file I’ve added the following code:

var j = jQuery.noConflict();

Why? Well you might be asked to work on a site which already uses one of the other Javascript frameworks available such as Prototype which is what the popular image overlay app Lightview is based on.

Prototype also uses the dollar sign “$” as its selector but jQuery and Prototype are incompatible with each other. If they both try and use the “$” selector we experience problems. The line above gets around this problem by denoting a different character as the selector and in this instance I’ve used “j”. You can use whatever you want. Some coders use “jQuery”. So their code might look like:

jQuery("div").innerText("Hello world!");

The next piece of code to add to the “main.js” file is:

j(document).ready(function()
{
    alert("Hello world!");
});

What’s this for? Basically this piece of code means “whenever the page  is finished loading, execute whatever is contained within this function”. In the above example you can see that an alert box containing the string “Hello world!” will be shown to the user once the page is loaded.

Let’s put this altogether!

So our page “index.html” looks as follows:

<html>
<head>
<title>My test page</title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/main.js"></script>
</head>
<body>
</body>
</html>

And our “js/main.js” file will contain the following code:

var j = jQuery.noConflict();
j(document).ready(function()
{
    alert("Hello world!");
});

When you save and upload these files to your development server you should see the alert “Hello world!” when you load up “index.html” in your browser. If so, then you’ll know that jQuery is working correctly and you are ready to start coding some more complicated jQuery scripts.