//, JavaScript/Five Ways to Spice Up Your Site with jQuery

Five Ways to Spice Up Your Site with jQuery

Introduction

Javascript frameworks aren’t just a path to AJAX without understanding XMLHttpRequest – mature libraries like jQuery are being across the board to improve usability, enhance accessibility and open doors to features you never thought were possible. With its inclusion in the ASP.NET platform, jQuery is now an accepted standard in all web development. In this tutorial, I’ll show you five quick tips for spicing up your site, often without a single change to your existing code.

To follow this tutorial, you’ll need some basic experience with jQuery. I suggest you read through my previous tutorial, Getting Started with AJAX in jQuery. An understanding of the DOM wouldn’t hurt, either. Otherwise, this tutorial requires little else than an existing web page or two using jQuery (download it and include it in your <head>), that could use some web development steroids.

Tip 1: Image-less Rounded Corners in jQuery

If you use rounded corners on your site, you’re probably currently dealing with a mess of <div>s and CSS declarations. Your pages might have something like this:

<div>
 <div>
  <div></div>
 </div>
 <div>
  <div>
   <div>
    (content)
   </div>
  </div>
 </div>
 <div>
  <div></div>
 </div>
</div>

It’s a mess, and it doesn’t help when you change a single property elsewhere and your various content areas start breaking out of the box. Luckily, the jQuery Corner plugin can take a target element and give it rounded corners, automatically, without a single image on your server!

To get started, download the library, add it alongside jQuery on your server and include it in your page. Next, work out what you give rounded corners – ideally something with a background color that stands out on the element behind it. The library demo page uses this HTML:

<div>
 <h1>Round</h1>
 <p>$(this).corner();</p>
</div>

As the text suggests, we can easily give it rounded corners using a single line of code, calling the corner() method on a jQuery object of that element. We can simply use this code to round the corner:

$(".round").round();

The plugin author, Dave Methvin, uses this to demonstrate the realistic results of the jQuery brand of simplicity:

For more details, check out the documentation page.

Tip 2: Striping Existing Tables

If you’re displaying a lot of data in your table, chances are your users are finding it quite tricky to scan and understand it. An easy improvement on this is table striping – alternating a background color for each row. However, table striping is typically quite messy, with a class on every row. If you use static HTML, moving rows around can break the continuity; if you use a server-side scripting language, you can end up with messes like this:

The main problem is this: there is no reliable way to select alternate rows in CSS, purely on the client side. jQuery, however, provides excellent CSS support and has a handy little :even selector we can use for exactly this. Let’s say we have the following table:

Flight Number From To Departure Arrival
BA 3451 Heathrow Nuremberg 19:20 19:50
BA 1254 Luton Alicante 19:40 20:50
LH 331 Heathrow Hamburg 20:00 20:20

We’re using the following code:

<table id="flight_table">
 <thead>
  <tr>
   <th>Flight Number</th>
   ...
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>BA 3451</td>
   ...
  </tr>
 </tbody>
</table>

Using <tbody>, we can select only the data rows of the table. We then need to use our even selector from before to select these rows, and apply a background color:

$("#flight_table tbody tr:even").css("background-color","#ddd");

Better still, we can apply a class to the alternate rows dynamically. As the class is loaded on the client side, we don’t have to change all our HTML or mess around with templates when we update the table. Also, chances are you don’t currently use <thead> and <tbody> – we can replace these with a jQuery filter as well! Assuming your header row is your first row, the :first selector is perfectly sufficient for only applying our styles to the actual body of the table, leaving your table header styling intact. Here’s the code:

$("table tr").not(":first").filter(":even").addClass("altrow")

You can then easily style these in your CSS:

tr.altrow { background-color: #eee; }

Here’s the final result:

Tip 3: Building a simple collapsing menu

With a lot of menu options on a sidebar, it’s always handy to be able to hide inactive menus. Using jQuery, we can create simple collapsing/expanding menus, and even quick and easy accordions!

Let’s say we’ve got a menu similar to this:

<ul id="menu">
<li>
 <a href="#">Users</a>

 <ul>
  <li><a href="#">View</a></li>
  <li><a href="#">Edit</a></li>
  <li><a href="#">Manage</a></li>
 </ul>
</li>
<li>
 <a href="#">Resources</a>

 <ul>
  <li><a href="#">View</a></li>
  <li><a href="#">Edit</a></li>
  <li><a href="#">Manage</a></li>
 </ul>
</li>
</ul>

Here we have a simple unordered list, which we can transform into a simple collapsing/expanding menu with just a few lines of jQuery. Inside $(document).ready(), we could add the following:

$("#menu ul").hide();
$("#menu li a").click(function(){
  $(this).next().toggle();
}

And we’re done! The first line hides all lists inside the <ul id="menu"> – that is, it selects the submenus and removes them from view. Whenever we click one of the links, we move to the next element – a <ul> of a submenu – and toggle its visibility status. A demo is available here.

Tip 4: Classy full-size views for thumbnails with lightboxes

Thumbnails are a nice way to display images on a page, but they’re often fairly limited in usefulness when trying to view detail. Of course, zooming in can present another challenge: do we create a new image description page but leave the current page, or do we view the image file directly in a new window and save the clutter? With lightboxes, we get the best of both worlds – we view the entire image quite comfortable on the screen, but we also don’t leave the current page and can easily restore the original view. Here’s a sample of a lightbox:

By using a lightbox jQuery plugin, we can easily turn clickable links to images into these visually appealing mini galleries on the fly.

To get started, download the .zip file from the project page, then copy out js/jquery.lightbox-0.5.pack.js and upload it to your server. Reference it in your <head> as needed:

<script type="text/javascript" src="/js/jquery.lightbox-0.5.pack.js"></script>

The .zip file includes some sample CSS you can use as a template, to easily modify the style of your lightboxes. Include it as well:

<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" />

The best feature about this plugin is that it degrades gracefully and doesn’t need any changes to your existing HTML. As long as you’ve got links to full size images, clicking them will open the lightbox once the effect is applied. Here’s a simple example of compatible HTML:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

However, there is one limitation: you need a reliable way to select which links should display lightboxes. If you have a photo gallery, this is quite simple; you probably already have the gallery in a <div> with a class, which is perfectly sufficient. Otherwise, you might need to apply a class to individual links – if you use a CMS or blogging software, this might already have been done for you. Once you select a jQuery object set of anchors, you can call the lightBox() method on them and you’re ready to go. For example, if you have a list of links with the class “thumbnail”, you can lightbox-enable them with this easy one-liner:

$(document).ready(function(){ 
    $('a.thumbnail').lightBox();
}

There are all sorts of optional configurations you can use – check out the project page for more details.

Tip 5: CrossSlide – pan and cross-fade animations

Let’s finish up with CrossSlide, a fantastic jQuery plugin that can pan and cross-fade images, animating them with pure Javascript. This is one of those Flash-killers that really demonstrates the power (and memory-efficiency) of handling basic effects with toolkits like jQuery.

CrossSlide will take a target element, fill it with the maximum visible area of that image, then animate the image. When it nears the end, it will fade to the next picture and continue. Each picture has a direction property, specifying how it should be moved. Of course, you don’t need to animate the images; the fade effect can be used on its own. It can even do a “Ken Burns” effect – zooming in smoothly as it animates.

So, to use CrossSlide, you need two things: a set of images to display, and a box to display them in. If you have a <div id="viewport">, you can easily fade through a set of images with this code:

$('#viewport').crossSlide({sleep:3,fade:1},[{src:'img/1.jpg'},{src:'img/2.jpg'}]);

The plugin constructor takes two arguments: a dictionary of configuration options, and a list of the properties for each image. In this example, the two images will each be shown for 3 seconds, before fading into the other. Remember that your <div id="viewport"> container still needs to be appropriate for viewing the image. This will fade, but with a few extra options we can pan as well:

$('#viewport').crossSlide({speed:30,fade:1},[{src:'img/1.jpg',dir:'down'},{src:'img/2.jpg',dir:'up'}]);

Here, the speed is measured in pixels per second; each image object needs a “dir” property for direction. There’s no sleep property, as the image doesn’t get any time to sleep; the animation is really just altering the image’s top CSS property.

The effect has to be seen to truly appreciate its usefulness: head over to the project page and check out the examples. The plugin is GPL licensed, so download it and enjoy.

2010-05-25T21:19:09+00:00 November 5th, 2008|AJAX, JavaScript|0 Comments

About the Author:

Akash Mehta is a web solutions consultant and application developer. He regularly advises website owners and small business on their online challenges, while researching and writing on innovative uses of web-related technologies for the developer community. In his copious free time, he enjoys cycling and investigating creative accounting methods.

Leave A Comment