AddyOsmani.com | Where Web Businesses Grow

 

 

 

Preface: Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn’t been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author – my original online source didn’t include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up. This revised version of the article gives full credit to Chris who is indeed the man that gave the original presentation and was kind enough to give his permission for his slides to be used. I and this article would like to thank him for being the main inspiration behind this topic.

 

Having viewed Chris’s presentation, I thought I’d write a post around it to help my readers see how jQuery helps us to extend CSS in ways that make our jobs a whole lot easier. I’ve always thought that jQuery was extraordinary framework – allowing both web developers and designers an easy way to harness the full visual capabilities of JavaScript. One of the nicest advantages of jQuery has been ability to extend CSS beyond what was previously capable with simple mark-up alone. In this post, I’m going to show you how to use jQuery to fix cross browser compatibility issues, solve some shortcomings with CSS, do things CSS just can’t do on it’s own and we’ll finally also go through some real-world problems that will be useful to both those new to the framework and those coders who’ve been using it for a while. I hope you find it helpful!.

 

Before we leap in, let’s take a look at why jQuery has come to be the most widely adopted of JavaScript frameworks. First, it’s extremely designer friendly. In Chris’s slide below you’ll see some standard CSS mark-up – hover conditions, list elements – defining styles is very much a static process, but jQuery allows you to easily and instantly add or remove classes, conditions, functions and more to any element on your page so that it takes CSS to the next level – interactivity. jQuery also has a very short learning curve (which as some of us know) has meant that creating effects like boxes sliding up or down a page child’s play.

 

 

 

 

Selectors and Pseudo Selectors

 

Selectors are one of the most important aspects of the jQuery library – these such selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. Below you’ll see that an example of where in the past we would have used CSS selectors to define some styling for say, an input element.

 

 

 

jQuery allows us to take even further control of this, providing methods where you can define custom selectors of your own, or use powerful pseudo selectors such as : odd, :button, :submit or :reset to select elements you wish to style. What this means is that at the end of the day, you have access to (or the ability to create access to) any element in the DOM via any number of conditions you want it to satisfy.

 

 

Transparency

 

jQuery has also made Opacity (or Transparency) more easy to implement than ever. Opacity is an effect whereby you set the visibility of an element to be a percentage or fraction of what it originally was – in design, this is often used to show that an element is inactive or to allow you to see through it. In the past, it was necessary to code up a special Opacity case for IE8, IE5-7, Safari, Netscape and the list went on. It was frustrating for developers because even at their best, these custom cases didn’t always work. That’s where we bring in jQuery…

 

 

 

jQuery’s support for transparency is so broad, that all you need to do to add opacity effects to any element in your page is use a selector for the element followed by .css(“opacity”, “opacity-value”); It really is that straight-forward.

 

 

Hover

 

Next, let’s take a look at the hover class. I remember that years ago, you could probably get away with using the simple css :hover selector to add hover effects to an element, but you would always run into problems with older browsers not being able to use this correctly. Now before anyone leaps in and says.. Well.. nobody these days has an old browser, you might be right, but don’t forget about that Mobile Web Browsers. Many of these browsers currently used in all sorts of Mobile devices don’t fully support the entire CSS 1/2 specification, but using jQuery can provide us with access to the features of them than can make ‘hover’ work as expected.

 

 

With jQuery, all you need to do to add hover classes to any element on your page is define a function as follows $(selector).hover { function for mouseOver, function for mouseOut}. Your mouseOver function can easily attach a class that highlights the element or perhaps underlines it while your mouseOver event would remove this class taking the element back to it’s default state. No more having to worry about IE not supporting the effect we’re trying to achieve!

 

 

 

 

Animation

 

For anyone that’s ever seen some of my CoverFlow work in JavaScript over the years, you’ll know that it can sometimes take a while to create impressive effects using JavaScript if you’re writing them from scratch. You don’t have the Tweening tools available to you in many production quality animation systems and much of your work is going to be manual. You’ve got to consider how the effect is going to look using your default CSS, whether it’s going to slow your browser down to a halt when all your styling’s done, if it’ll work in all browsers but..jQuery takes a lot of that pain right away.

 

With it’s built-in functions like fadeIn(), slideDown() and more, it’s never been easier to add simple animated effects to you webpages easily. jQuery even comes with a special animate() function that lets you chain together special effects so things that I would have had nightmares about (like having a logo from the top of a page, adding and removing CSS classes every second or two to create complex effects or even just making an icon bounce) are now relatively easy to get done in a few minutes.

 

 

In this slide you can see an example of where jQuery can be truly powerful – we have a block of text in a paragraph which we need to constrain to a specific width so that it doesn’t break our site’s template. This piece of text could just be a list that would look better in it’s original form rather than having a few line breaks split it up, so how can jQuery help me come up with a solution to my problem?.

 

Well, let’s use hover! – if I were to make it so that when someone hovers over the paragraph it’ll set itself to the front of the page and expand, they’ll be able to read it without breaking my template. Just as easily, when they mouseOut, I can simply set the width of the paragraph back to what it was before and my page will still work fine without any problems at all. A perfect example of how a nice UI update can be achieved with minimal code and the amazing jQuery framework.

 

 

Grids

 

Next lets take a look at Grids – Grids can contain all sorts of information from gallery thumbnails to previews of pieces of text from a document. A perfect example of the kind of content you might want to fit into the below layout is if you have a Blog or Publishing site where users are posting new articles or stories every day (even Tweets). You might want a way of showing readers a preview of content past just the title and what better way to display it in a compact form other than a grid?

 

The problem with grids are that they can be difficult – when you’re not dealing with tabular data and your content has text of a length that can vary, you need to think of an intelligent way to make your layout shape around the data so that it still looks the way you want it to.

 

 

If we try to solve this problem using just CSS, it’s going to take us hours because as you can see below, simply defining one class for our grid entry isn’t going to solve our problem. We *could* do something on the server side such as limiting the amount of text that’s output, but what if we wanted to let the user expand the entry so they can read all of the preview text or we wanted to display a complete sentence? A UI Solution would be called for and as CSS is going to cause us some problems, let’s see if we can come up with something more intelligent using jQuery next..

 

 

With jQuery, we can set specific CSS rules for border cases, text that makes our preview element longer than the other entries, we can turn our entire DIV into a clickable object and to top if off we can also add some nice opacity hover effects to make it look that extra bit professional. We can achieve all of these using a few simple checks for height, a few css rules and some basic jQuery functions. For the full code samples, please click on the slide to expand.

 

 

Zebra Striping

 

Zebra Striping is a design technique that will be familiar to anyone that’s ever used iTunes – it’s an aesthetically pleasing way of displaying your information because it allows the reader to neatly separate rows of data in their mind.

 

The problem with Zebra striping is that it usually requires a lot of manual work, whether you decide to use the dd and :even selectors or not. Stylesheets, whether they be on the web via CSS or in an application such as Adobe InDesign are there to control the visual properties of elements contained within a document. And while CSS’s selectors allow you to specify which document elements should have which styles applied, the pure-CSS solution to Zebra Striping requires the author to apply the appropriate class (either even or odd) to at least half of the rows in a table.

 

While this isn’t a problem if the table contains only a few rows, copying and pasting can get old very quickly when the table contains tens or hundreds of rows. This problem can be avoided when the table is generated on the server side, because modifications to the table’s markup need only the editing of a few lines of code. Unfortunately, not every web page is built by a server-side application, and even if you are creating a web app, it is frequently desirable to off-load layout processing to the client through CSS and JavaScript – so let’s see how jQuery can make Zebra striping easy for everyone.

 

 

 

Rather than tediously and manually binding CSS classes to the appropriate rows, we can instead use a little jQuery to go through the table and apply CSS styles for us.

 

Let’s take a look at how this can be achieved:

 

1. Obtain a reference to the table that we want to add stripes to.
2. With that in hand, drill down into the table’s child elements to find all the <tr>s that are contained within <tbody> elements.
3. Loop through the <td>s and apply the appropriate styling (which is determined by the location of this <tr> in the table).
Season to taste.

 

A-List-Apart has an excellent demo of this that reproduces the iTunes Zebra Striping Effect. The source code to their script can be found here. In the below example, Zebra Striping can be extended by adding hover classes for specific columns or rows.

 

 

 

We can take that example one step further by using a selector which checks to see if a particular row contains a specific term. This Client-side search doesn’t need Ajax or any server-side code to work and within one line of jQuery we can easily find and highlight the row we’re looking for.

 

 

A plugin that I’ve personally found useful in the past is the jQuery TableSorter by Christian Bach. It’s very easy to integrate into both HTML, Adobe AIR and PHP Applications and even includes some really great Sorting options too. You can check it out over at http://www.tablesorter.com/docs

 

 

 

Loading After Loading

 

 

One of the issues that users regularly experience is having to wait for their page to fully load up Flash Video Players – we’ve all had to deal with this crap before. Some sites, rather than automatically loading up a video, will instead display a thumbnail or preview image in the Player to speed things up, but if you have to wait for Flash to initialize it’s still going to take some of your time. jQuery allows us to do this a little more intelligently. Rather than loading up multimedia when the page first loads, just display the preview image in a div (without the Player loaded). If a user decided they want to watch the video, you can easily load up the Flash Video Player page via jQuery’s .load() function so that if they would like to watch it..they will, but if they don’t, they’ll have a much faster and smoother experience browsing through the rest of your site.

 

   

Controlling Outside Content

 

 

CSS is a wonderful tool for designing, but what if you want to control the content that you’ve styled up outside of pure CSS definitions?. That’s a problem  – CSS doesn’t allow you to dynamically display content when other actions occur in your page such as a user entering in their password or credit-card details. This is where some really simply jQuery logic can add more power to your interface.  In the example below we want to display a voucher code box when a user clicks on “Add a coupon”. Because CSS doesn’t allow us to do this..

 

 

 

we simply do it with some JavaScript. Notice how in just two lines of code we’ve managed to enrich our shopping cart in less than 30 seconds. How awesome is that?

 

 

To sum it up, jQuery is a CSS fan’s dream – it provides you with a simple, elegant way to add another level of interaction to your pages without having to waste your time debugging too many quirks with our age-old friend, JavaScript. On many occasions, it’s helped me to pump out impressive interactive web-pages that not only impressed my clients….. they impressed me too, because for many years it wasn’t possible to do the things it’s enabled us to without taking days. So as we welcome in the new year, I’d like to take my hat off to jQuery – thank you for making my life easier. Once again, my thanks to Chris Coyier for his excellent presentation slides