Thursday 31 January 2013

How to Create a Showcase with jQuery

Showcases are a great way to show your visitors your latest addition to your portfolio or to present the latest product or article. Many s... thumbnail 1 summary

Showcases are a great way to show your visitors your latest addition to your portfolio or to present the latest product or article. Many sites use this technique to cram information into an area so that your visitors do not miss your message.
This tutorial will show you how to create such a showcase by utilising jQuery.
jQuery makes animation easy. This tutorial will guide you through the setting up of your HTML, CSS and the associated jQuery code to create the showcase.


The HTML

The viewport div is our window to the content that you wish to display to the user. We’ll use CSS later to ensure the viewport only displays the content you want. Inside the div, we will be enclosing two further divs; one for the sections and another for the labels which will pop up when the viewport scrolls into view. Both of these will be inside another div: scrollable which will be the element we use to scroll all the content within it into view. The sections div will contain four further divs which will represent our sections and the labels div will contain another four divs to represent our labels. Lastly, we’ll create a row of simple buttons so we can elect to scroll a certain section into view.
1<div id="viewport">
2 
3    <div id="scrollable">
4 
5        <div id="sections">
6 
7            <div id="section1" class="section">
8            <h1>Uluru</h1>
9            </div>
10 
11            <div id="section2" class="section">
12            <h1>The Eiffel Tower</h1>
13            </div>
14 
15            <div id="section3" class="section">
16            <h1>Empire State Building</h1>
17            </div>
18 
19            <div id="section4" class="section">
20            <h1>The Great Wall of China</h1>
21            </div>
22 
23        </div>
24 
25        <div id="label">
26 
27            <div class="label">
28            <p>Also known as Ayre's rock</p>
29            </div>
30 
31            <div class="label">
32            <p>In the world's most romantic city</p>
33            </div>
34 
35            <div class="label">
36            <p>Site of the last hour of King Kong's life</p>
37            </div>
38 
39            <div class="label">
40            <p>This can be seen from space</p>
41            </div>
42 
43        </div>
44    </div>
45</div>
46 
47<div id="menu">
48 
49<div id="scroll1" class="button"></div>
50<div id="scroll2" class="button"></div>
51<div id="scroll3" class="button"></div>
52<div id="scroll4" class="button"></div>
53 
54</div>

The CSS

We’ll start with the viewport itself. We want to set the dimensions of the viewport, ensure that any content within it does not flow out and we’ll add a thick 5px solid border.
1#viewport
2{
3    overflow:hidden;
4    border:5px solid;
5    height:300px;
6    width:600px;
7}
The sections and labels divs are very similar. The width will be determined by the number of sections you want to have multiplied by the width of each section. In this example, our sections are 600px wide and we will be using four of them so the width of the #content and #label divs will be 2400px (4 x 600px). The width and height are all we need to style the sections div.
1#sections
2{
3    width:2400px;
4    height:300px;
5}
The label div is slightly different since we require it to slide out of view when we click on a button and it does not need to be 300px as this would obscure the entire viewport when it came into view. We’ll set this to 100px high. We also need to ensure that the label appears when the page is first loaded, so we set the bottom property to 100px so that it appears 100px above the bottom of the div in which it resides. We also require setting the position to relative so we can use the bottom property.
1#label
2{
3    position:relative;
4    width:2400px;
5    height:100px;
6    bottom:100px;
7}
Both contents and labels are wrapped in another div identified as scrollable which will be the element we use to move all the content within it. This needs to be set to the dimensions of the content div as this contains all that will be viewable in the viewport. We need to set the position relative since we will be taking advantage of the left property via jQuery to scroll the content into view.
We’ll look at the individual section divs now to style them for our purposes. Each div classed as section needs to float left of each other otherwise the content will flow out of the containing div and onto the next row. We need these to be next to each other so that when we alter the left position of the #scrollable, the relevant section will come into view. Our sections will be 600px wide by 300px hight wide but we’ll add some padding of 10px so everything isn’t flush to the sides of the viewport. Our height and width will need to be reduced by 20px to cater for this.
1.section
2{
3    float:left;
4    padding:10px;
5    width:580px;
6    height:280px;
7}
The individual label divs will be 600px wide and 100px high with a 10px padding. We also need to float these left so that they appear next to each other and don’t stack on top of each other. We’ll also set the background colour of the label to grey and the colour of the text to white.
1.label
2{
3    float:left;
4    padding:10px;
5    height:80px;
6    width:580px;
7    background-color:#777;
8    color:white;
9}
We’ll add some images to the background. I used some images from wikimedia commons, scaled them down to 600px by 300px and set them as background images.
1#section1
2{
3    background-image:url('../image/uluru.jpg');
4}
5  
6#section2
7{
8    background-image:url('../image/eiffeltower.jpg');
9}
10  
11#section3
12{
13    background-image:url('../image/empirestate.jpg');
14}
15  
16#section4
17{
18    background-image:url('../image/greatwall.jpg');
19}
The last bit of styling we need to do is the menu section which will allow us to scroll through to the various sections. You can do this in any manner you want but for this example, we’ll just use some simple divs wich will be 30px by 30px, have a background colour of grey and be spaced 5px from each other by setting a margin of 5px. These buttons will all be wrapped in another div which we don’t need to style but contains all of our buttons.
1.button
2{
3    height:30px;
4    width:30px;
5    background-color:#777;
6    float:left;
7    margin:5px;
8}
So that is all the css done and now we’re ready to get our hands dirty with jQuery.

The jQuery

Queuing Events

We’ll start first by examining what it is our showcase “widget” will do. When we click on one of our buttons, we want our label to drop down out of view, the new section to come into view and then the label to pop back up again. We’ll be scrolling the scrollable div so we only need to be concerned with scrolling that – everything within it will be dragged along.
So the order of events is:
  1. hide the label
  2. scroll the viewport
  3. show the label
There are a number of ways to implement this but we’ll cover the queue function that jQuery supplies. Queuing is the principle of adding events to an object and then dequeuing them or executing them. We’ll create a function which queues three functions to hide the label, scroll the viewport and then show the label. Queuing an event requires attaching the event to an object in the DOM. You can create custom queues or, if not specified, you can use the default queue (called ‘fx’). Once you queue an event in fx, the first function will execute. However, the next function needs to be explicitly called to execute.
The main function navigate will set up the queued events. We will also add a function to clear the queue so that events don’t back up which would result in the queue getting larger and taking longer to complete. clearQueue(), if supplied with no arguments, will clear the events on the default fx queue.
1function navigate(position)
2{
3    $('#scrollable').clearQueue();
4 
5    $('#scrollable').queue(hideLabel);
6    $('#scrollable').queue(scroll(position));
7    $('#scrollable').queue(showLabel);
8}

Animating the Elements

We’ll define these functions next by using the animate() method and make use of a callback to dequeue the next event.
To hide the label, we need to move the bottom position of the label to 0px making it disappear from the viewport and we’ll nominate that this takes a quarter of a second or 250 milliseconds. We also need to ensure that the next event in the queue executes and so we create an inline function dequeueing the next event.
1function hideLabel()
2{
3    $('#label').animate(
4        {bottom:'0px'},
5        250,
6        null,
7        function()
8        {
9            $('#scrollable').dequeue();
10        });
11}
Next, we need to scroll the scrollable div to the relevant position. Since each section is 600px we need to move the div to the left 600px for every section. To show the first section in the viewport, the left property needs to be 0px which is the default state when the page is loaded, to view the second section, we need to set left to –600px, the third; –1200px and so on. This transition will take 500 milliseconds or half a second. We also need to dequeue the next event in the queue so again we create an anonymous function to do this:
1function scroll(position)
2{
3    position = position + "px";
4 
5    $('#scrollable').animate(
6        {left:position},
7        500,
8        null,
9        function()
10        {
11            $('#scrollable').dequeue();
12        });
13}
The last function needs to show the label again, so we set the bottom css property back to 100px and ensure this takes place over 250 milliseconds. We don’t need to trigger the next event in the queue as this is the last in the sequence.
1function showLabel()
2{
3    $('#label').animate(
4        {bottom:'100px'},
5        250);
6}

Binding the Events

The next thing we need to do is attach the navigate event to relevant elements on the page. In our case this would be the four buttons we defined earlier. The best way to attach these events is to do it through jQuery. The document needs to be fully loaded before we do this so we use the ready() function to wrap the code in.
We use jQuery’s click function to instantiate an anonymous function which in turn triggers the navigate function with an appropriate value for position.
1$(document).ready(function()
2        {
3  
4            $('#scroll1').click(function()
5                {
6                    navigate(0);
7                }
8            );
9  
10            $('#scroll2').click(function()
11                {
12                    navigate('-600');
13                }
14            );
15  
16            $('#scroll3').click(function()
17                {
18                    navigate('-1200');
19                }
20            );
21  
22            $('#scroll4').click(function()
23                {
24                    navigate('-1800');
25                }
26            );
27        }
28    );
So that is all that is required to create the scrolling showcase “widget” but we’ll just add a few more lines of jQuery to add some opacity to the label and make it fade in when the mouse is over it and fade out when the mouse is moved out of it. This code can simply be added to the ready() function ensuring it isn’t executed until the document is fully loaded. We’ll bind the event since, as you will see later, we will need to unbind it in certain circumstances. The two functions to fade in and fade out are defined as:
1function fadeOut()
2{
3    $('#label').stop().fadeTo(250,0.7);
4}
5 
6function fadeIn()
7{
8    $('#label').stop().fadeTo(250,1);
9}
We’ll also add a piece of code to set the opacity initially to 0.7. This is where jQuery really excels. There are many inconsistencies between browsers with the css opacity property but we don’t have to worry about that. All we need to do is specify the W3C standard opacity property. jQuery does the rest. Again, this can be added to the ready() function.
1$('#label').css("opacity", "0.7");

Tidying Up

You’ll notice that when using the button to select your new section, if you move your mouse to the label quickly, the animation stops suddenly. This is because we have bound an event to the label element and used stop() to stop the events from queuing up and making the UI unusable. We can detach this event and reattach it once the scrolling has been completed so as not to cause disruption. In our navigate function, we will unbind the event before creating the queue:
1function navigate(position)
2{
3    $('.label').unbind('mouseover', fadeIn);
4    $('.label').unbind('mouseout', fadeOut);
5 
6    $('#scrollable').clearQueue();
7 
8    $('#scrollable').queue(hideLabel);
9    $('#scrollable').queue(scroll(position));
10    $('#scrollable').queue(showLabel);
11}
Now that the event is detached, the animation won’t be stopped should our mouse enter the label area. We’ll need to reattach this once all the animation is complete. A sensible place to do this would be to call an anonymous callback function in the showLabel() function since this is the last in the queue and will only execute when this is complete.
1function showLabel()
2{
3    $('#label').animate(
4        {bottom:'100px'},
5        250,
6        function()
7        {
8            $('.label').bind('mouseover', fadeIn);
9            $('.label').bind('mouseout', fadeOut);
10        });
11}
One final thing we should do is to ensure that no animation is called if we are attempting to select a section that we are already on. We can do this by string a variable which indicates which page we’re on and then testing this in the navigate() function to determine whether we should execute the transition. We’ll create a variable which is outside the scope of any function so anywhere can have access to it called currentPage and set this to 1 to begin with. We’ll alter the navigate() function to take a second argument; page which will notify the function which section is being called. This value can be tested against currentPage to see if the animation should occur. If the current page is not being called, we can animate and then set currentPage to be the page that was called. The navigate() function should be updated to this (note that we have declared the currentPage variable just above this):
1var currentPage;
2 
3function navigate(position, page)
4{
5    if(page != currentPage)
6    {
7        currentPage = page;
8 
9        $('.label').unbind('mouseover', fadeIn);
10        $('.label').unbind('mouseout', fadeOut);
11 
12        $('#scrollable').clearQueue();
13 
14        $('#scrollable').queue(hideLabel);
15        $('#scrollable').queue(scroll(position));
16        $('#scrollable').queue(showLabel);
17    }
18}
The bindings to the buttons also need to be changed so that the page values are sent to navigate():
1$(document).ready(function()
2    {
3 
4        $('#scroll1').click(function()
5            {
6                navigate(0,1);
7            }
8        );
9 
10        $('#scroll2').click(function()
11            {
12                navigate('-600',2);
13            }
14        );
15 
16        $('#scroll3').click(function()
17            {
18                navigate('-1200',3);
19            }
20        );
21 
22        $('#scroll4').click(function()
23            {
24                navigate('-1800',4);
25            }
26        );
27 
28        $('.label').bind('mouseover', fadeIn);
29        $('.label').bind('mouseout', fadeOut);
30 
31        $('#label').css("opacity", "0.7");
32    }
33);

Summary

In this tutorial you learnt how to create a simple showcase widget. You used HTML and CSS to style it and most importantly used the overflow property to limit the view of the viewport. Queuing and dequeuing events with jQuery enables you to execute events asynchronously and binding and unbinding events enables you to exert more control over the UI to prevent unnecessary animation. This example is easily extend to create more sections. You just need to make sure the widths of #content, #scrollable and #label divs are expanded to including the extra sections that you wish (remember — 600px per section) and of course, add an extra section in the #content div and a related label in the #labels div.

Design Festival Podcast #12: ZURB, jQuery UI, and Charlie The Unicorn

Hey guys, sorry for the slight delay this week — I’ve been a bit sick over the last few days but the cast is finally here, and it’s another... thumbnail 1 summary

Hey guys, sorry for the slight delay this week — I’ve been a bit sick over the last few days but the cast is finally here, and it’s another treat. For this episode I had a chat with Matt Kelly from ZURB, the interaction design and strategy studio behind web apps like Notable and Verify. Matt and I discuss jQuery UI, the library ZURB uses extensively for their web apps.

Download this Episode

You can download this episode as a standalone MP3 file:
You can subscribe to the Design Festival Podcast either directly or via iTunes — add the Design Festival Podcast to iTunes.

Episode Summary

Presenters

Content Rundown

  • Intro: Matt and ZURB
  • What is jQuery UI?
  • Matt’s talk from jQuery Boston
  • Matt’s 4 Maxims: “do no harm, understand response times, communicate, and anticipation
  • User feedback in applications — adding delays to interactions
  • Pre-​​fetching data to improve responsiveness — inspiration from the Flash days?
  • Projects being worked on: Bounce, Notable, Verify, and more…
  • ZURB’s Playground — experiments and ideas
  • Recommendations of the week

Recommendations

Also of interest and relevant to the podcast, Matt has since written an article on the pros and cons of stacking divs for faster interactions. The ZURB team writes regularly on their blog, as well as for Smashing Magazine.

Audio Transcript

Workin’ on it. Will be added soon.

Pretty Inputs: Help Users Enter the Right Data with jQuery

Entering data in large fields can be a UX nightmare; it can be a challenge to make it simple for users to enter their data. How do they kn... thumbnail 1 summary

Entering data in large fields can be a UX nightmare; it can be a challenge to make it simple for users to enter their data. How do they know what to enter? Can you really explain what they are meant to enter in just a input label?


We had the same problem to deal with on a project I was recently involved in. Users could enter a title of an article (in this case), and although it was required — the form wouldn’t submit unless content had been entered into the Title field — we wanted to reassure users that they could always change the title later. Also, we wanted to give some helpful tips and provide examples of good titles. So we figured that having friendly, helpful tooltips that would display if they were needed, but wouldn’t get in the way, were the way to go.

The HTML for the tooltips is quite easy. The class of helpToolTipSubject is used to set up the jQuery actions. The
contains both the question mark (the text that appears on the button) and the tooltip’s contents. The
gives you the CSS hook for adding the point at the bottom of the tooltip. The code for it is below.
1<input class="helpToolTipSubject" type="text" name="name" id="name" value="Pretty, huh?"></input>
2<div class="helpToolTipTrigger">?
3<div class="tooltip">
4
5<p>You can add a really helpful tooltip giving your users hints about what they need to enter into the input field.</p>
6
7<div class="point"></div>
8</div>
9</div>
The idea that we could provide some help where the user needs it, but without it getting in the user’s way, suited our needs well. We used the tooltips to show hints that, once they’d been read, didn’t really have to be seen again (unless the user felt they needed a reminder).
The JavaScript therefore has to find all the tooltip triggers (via the CSS classes we’ve added), bind a click event to the button, and know when the button gets clicked, it can open the the tooltip, add an overlay (to cover everything else on the page and wait for clicks), and be ready to hide the tooltip and overlay if there’s another click.
To check out the JavaScript (which is a little complex, but I’ve gone through and commented it rather thoroughly) and the CSS, view the source of this example.

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 th... thumbnail 1 summary


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:
1<html>
2<head>
3<title>jQuery for Designers</title>
4</head>
5<body>
6Lots of insightful stuff here.
7</body>
8</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):
1<html>
2<head>
3<title>jQuery for Designers</title>
4 
5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
6 
7</head>
8<body>
9Lots of insightful stuff here.
10</body>
11</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:
1<html>
2<head>
3<title>jQuery for Designers</title>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
5 
6<script type="text/javascript">
7$(document).ready(function(){
8alert("I made a jQuery!");
9});
10</script>
11 
12</head>
13<body>
14Lots of insightful stuff here.
15</body>
16</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:
1<html>
2<head>
3<title>jQuery for Designers</title>
4 
5
6 
7<script type="text/javascript">
8$(document).ready(function(){
9alert("I made a jQuery!");
10});
11</script>
12</head>
13<body>
14Lots of insightful stuff here.
15</body>
16</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:
1<html>
2<head>
3<title>jQuery for Designers</title>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
5 
6<script type="text/javascript" src="Lettering.js"></script>
7<script>
8$(document).ready(function() {
9$("#triple_threat").lettering('lines');
10});
11 
12</script>
13 
14</head>
15<body>
16Lots of insightful stuff here.
17</body>
18</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:
1<html>
2<head>
3<title>jQuery for Designers</title>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
5<script type="text/javascript" src="Lettering.js"></script>
6<script>
7$(document).ready(function() {
8$("#triple_threat").lettering('lines');
9});
10</script>
11 
12<style type="text/css">
13#triple_threat .line1{
14font-size: 38px;
15text-transform: uppercase;
16display:block;
17text-align:center;
18letter-spacing: 8px;
19}
20 
21#triple_threat .line2{
22font-size: 21px;
23text-transform: lowercase;
24font-style: italic;
25display:block;
26text-align:center;
27margin-bottom: 6px;
28}
29 
30#triple_threat .line3{
31font-size: 13px;
32text-transform: uppercase;
33display:block;
34text-align:center;
35line-height: 24px;
36}
37</style>
38 
39</head>
40<body>
41Lots of insightful stuff here.
42</body>
43</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.
1<html>
2<head>
3<title>jQuery for Designers</title>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
5<script type="text/javascript" src="Lettering.js"></script>
6<script>
7$(document).ready(function() {
8$("#triple_threat").lettering('lines');
9});
10</script>
11<style type="text/css">
12#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; }
13</style>
14</head>
15<body>
16 
17<p id="triple_threat">Lots of insights!<br />
18I wouldn't go so far as to say "genius".<br />
19But you can say that if you really want to.<br />
20</p>
21 
22</body>
23</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:
Subscribe to: Posts (Atom)