JavaScript - - By Tara Hornor

An Introduction to jQuery for Designers

I found approaching jQuery to be an intimidating experience because I’m not a developer. Implementing JavaScript was what “they” did on the back-end of a website, but had little to do with my process when creating a design for a website.

But as a designer, I need to know the full range of options – and limitations – I have at my disposal when building a design for a client. jQuery presents some amazing options for design. If I want to be at the top of my field, I felt I needed to push myself out of my box and learn what the heck this whole jQuery thing is all about.

What is jQuery?

In short, it’s a library of code that lets you tell web browsers how to do fancy stuff. The less short, and more technical, description is that jQuery is a JavaScript library that makes it easy to quickly implement AJAX, CSS, and other web technologies with consistent results across browsers – even mobile browsers.

Now, take a step back and don’t freak out (deep breaths!). As I’ll demonstrate, you don’t need to know what all that techie stuff is to understand how jQuery can make your designs more interactive and exciting.

Why do I need to know about jQuery?

I know there will be some folks who adamantly disagree with me, but jQuery is the future. More importantly, jQuery gives you a whole new set of design tools that you should be aware of as a designer. If you don’t know about certain capabilities, you’ll never use them. jQuery puts a whole new set of visual opportunities on the table.

At a minimum, as a designer, you need to know WHAT options you have for bringing your client’s vision to life. If you know HOW to implement something like jQuery, you become that much more valuable.

What can jQuery do for my designs?

Plenty. From typography upgrades, to image galleries, to beautiful comment forms – jQuery already has thousands of pre-built, ready to go resources that can dramatically improve how your designs look and feel.

Once you know a little bit about jQuery, your design options will explode. You may find that the technology is very easy to work with and create your own code. At the least, you can start looking for design tools you may have completely left unexplored.

How hard is it to implement jQuery?

It’s actually very easy, but you have to start off the right way. I’ll explain as if you’ve never worked with HTML before. You can copy and paste this code into a text editor and save it as a .HTML file and it will open in a browser. Save your file with the file name “example.html”, just so you and I stay on the same page:

<html>
<head>
<title>jQuery for Designers</title>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #1

Now this is as basic as it gets, and I’m sorry for the designers out there already pretty comfortable with HTML. It gets better pretty quickly.

Now in the

section of the HTML document, we’re going to implement jQuery with this simple code (highlighted for emphasis):
<html>
<head>
<title>jQuery for Designers</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #2

A couple of important points here. First of all, I’m referencing a document hosted by Google. You can download that file and host it on your website, but my preference is to let the big companies host these files and keep the pressure off of my server. You may want to reference somebody other than Google. Two other popular sources for the file are Microsoft and Media Temple. These files are on what are referred to in the developer community as Content Delivery Networks (CDN) and these files are available for public use.

Getting to the code, all we have done is told the browser to run the JavaScript. You won’t see any changes to your web page if you copy and paste this into a new document. Not yet at least.

So let’s test this out to see what’s going on. If you’ve never delved into the depths of developing for the web, this is going to be an exciting moment for you. The new code is highlighted:

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #3

Paste this into a blank document, save it as an HTML file, and open it in a browser. You’ll get a nice pop-up with the “I made a jQuery!” message. To prove that this is in fact a simple jQuery implementation and not just JavaScript, comment out the jQuery script and run the same code:

<html>
<head>
<title>jQuery for Designers</title>

<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #4

Look, Ma! No pop-ups! This is because you didn’t call the jQuery that tells the browser that the alert box should open up. Delete out the comments or just paste the code from example #2 above so you have the jQuery code reference as needed.

So I made a pop-up. Now what?

Yeah, so the pop-up example is super-simple, but if you have never gone through the steps of implementing jQuery on your own, this is a HUGE leap for you. So don’t downplay it too much, although you can feel free to make fun of my pop-up all you want.

The next thing to do is find the jQuery you want to implement. Options abound! Based upon your needs, you can find all kinds of fancy effects to apply to your web pages.

Can you show me how to implement a jQuery plugin?

Sure! I’ll walk you through just one example using one of my (new) favorite jQuery plugins – Lettering, by Davatron5000.

First, you need to download the jQuery code which will almost always be a .JS file, like the “jquery.min.js” in our above examples. You can download Lettering.js from Github. Copy the code into a blank text document and save it as Lettering.js in the same folder as your example.html file.

Second, add the script from Davatron5000 to the above example #2 code:

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});

</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #5 – adding Lettering.js and calling the ‘lines’ function

So let’s slow down a bit. In the fifth line from the top we’ve referenced your new Lettering.js file. You can put this file on your web server and reference it directly at some point.

Next we see our script. I called this little beauty “triple_threat” because I am going to break the typography into three lines. Lettering.js can do a lot of amazing stuff, including automatically break every letter down into its own CSS class so you can manipulate each and every letter very easily.

Instead of going through the motions of each letter, I just want three lines. To do this, I referenced the code “lettering(‘lines’) as you can see on line eight. You can also break each letter down by leaving the code blank – .lettering();. Or, by using ‘words’ you can have it automagically break each word down.

Just to make sure we are on the same page, the contents of your folder should look like this:

Now that Lettering.js has used jQuery to break down the lines of HTML, we need some CSS to work our magic. Add this code to Example #5 from above:

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>

<style type="text/css">
#triple_threat .line1{
font-size: 38px;
text-transform: uppercase;
display:block;
text-align:center;
letter-spacing: 8px;
}

#triple_threat .line2{
font-size: 21px;
text-transform: lowercase;
font-style: italic;
display:block;
text-align:center;
margin-bottom: 6px;
}

#triple_threat .line3{
font-size: 13px;
text-transform: uppercase;
display:block;
text-align:center;
line-height: 24px;
}
</style>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery example #6 – adding CSS

What we now have are some CSS classes. You can reference the “triple_threat” class and see the results. So let’s add the class to our example.html. Remember, we need three lines, so we will use the
tag to create those. For those brand new to HTML, I know this is a lot of information, but just copy and paste for now and research these concepts later if you need to.

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>
<style type="text/css">
#triple_threat .line1{font-size: 38px; text-transform: uppercase; display:block; text-align:center; letter-spacing: 8px; } #triple_threat .line2{font-size: 21px; text-transform: lowercase; font-style: italic; display:block; text-align:center; margin-bottom: 6px; } #triple_threat .line3{font-size: 13px; text-transform: uppercase; display:block; text-align:center; line-height: 24px; }
</style>
</head>
<body>

<p id="triple_threat">Lots of insights!<br />
I wouldn't go so far as to say "genius".<br />
But you can say that if you really want to.<br />
</p>

</body>
</html>

jQuery example #7 – implementing the jQuery

I consolidated the CSS to save space and added the “triple_threat” paragraphs. The results aren’t stunning, but if you’ve successfully transformed the characters, then you’ve implemented jQuery!

I’m hooked! Where can I find more information?!

I’m glad you asked. The primary source for the code side of jQuery is over at jQuery.com.

For jQuery plugins you can use today, check out these resources:

Welcome to the world of jQuery, you savvy designer, you! Be sure to let me know what jQuery plugins become your favs!

Sponsors