10 Easy jQuery Tricks for Designers

By Kayla Knight

There are plenty of jQuery tricks and techniques out there, and the vast and powerful jQuery library can meet almost anyone’s JavaScript’ing needs. Since jQuery makes JavaScript accessible to designers who want to add simple interaction and visual techniques into their design without knowing extensive programming knowledge, it’s worth a few moments to explore this excellent library.

As any designer knows, adding small bits of extra visual detail and user-friendliness can add professionalism and appeal to any web design. In addition, for designers that sell templates, WordPress themes, and other types of web designs, the use of jQuery in a design can be a great selling point.

Let’s take a look at ten simple, effective, and useful tricks and techniques from several excellent jQuery developers and sites around the web that leverage the library to take your designs to another level.

1. Equal-Height Columns

Equal-Height Columns

Columns with equal heights have always been a problem for designers using divs, although now, there are quite a few solutions. Among the solutions available to you is using jQuery. This technique only requires a very small JavaScript function to handle everything, then some basic integration with the main layout to make the magic happen.

The function and snippets for this approach is from CSSNewbie. If anyone would like more insight to how the function works, it’s all there.

To solve this problem with jQuery, just add this function to your pages you wish to have equal heights (or include it as a JavaScript file – which is better for maintainability).

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

To get equal-height columns, link to the script that contains the function, and put the following code block below in the <head> tags of your pages.

<script type="text/javascript">
$(document).ready(function(){
  equalHeight($(".col1"));
  equalHeight($(".col2"));
  equalHeight($(".col3"));
});
</script>

The code will execute as soon as the DOM is ready to be utilized, ($(document).ready(function()) and then uses the equalHeight function to accurately calculate the height of all the columns. As one can see, all a designer needs to do is use divs with classes of col1, col2, and col3 to make this example work properly.

2. Rounded corners without the HTML mess

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Rounded corners without the HTML mess

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.

<div class="roundedbox">
  <div class="hd">
  <div class="c"></div>
</div>
<div class="bd">
  <div class="c">
    <div class="s">
      <-- main content goes here -->
    </div>
  </div>
</div>
<div class="ft">
  <div class="c"></div>
</div>
</div>

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTML divs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

<script type="text/javascript">
$(document).ready(function(){
    $("div.roundbox").wrap('
      <div class="roundedbox">'+
      ' <div class="bd">'+
      '   <div class="c">'+
      '     <div class="s">'+
      '     </div>'+
      '  </div>'+
      ' </div>'+
      '</div>');
});
</script>

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div‘s.

Here’s a sample div HTML structure:

<div class="roundbox">
  <-- main content goes here -->
</div>

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

3. Scrolling Content

Animated scrolling in jQuery can be used to create image carousels and to simplify a design by being able to display more content in a smaller space.

Below is an example of a jQuery plugin called Scrollable (check out the demo on that page to see the plugin in action).

There are tons of plugins and tutorials on the web for how to create scrollable content, the Scrollable plugin being one of them.

To help you scroll up and down a web page in an animated way, check out the tutorial called Scroll window smoothly in jQuery on Freelancer ID Blog.

In order to tell jQuery to scroll, we need a section in a web page to scroll up or down to (ScrollTarget).

<div class="ScrollTarget">
  <p>After a scroll button is clicked, jQuery will animate the 
  page to this point.</p>
</div>

Next, we can use any HTML element to use as a trigger to call a function called scroll(), such as an image or input button to tell the browser to scroll to the above div when clicked.

Example of a input button:

<input onclick="scoll();" type="button" value="Scroll" />

Example of an image:

<img onclick="scoll();" src="images/scroll.jpg" alt="Scroll" />

Here is the code for the scroll() function.

function scroll(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
}

The downside to this technique is that it uses an onclick property which is bad practice if you’re interested in obeying unobtrusive JavaScript principles. So, you can modify the element’s markup in such a way that it has a class property value of, for example, scrollTrigger:

<input class="scrollTrigger" type="button" value="Scroll" />

And then simply replace the above scroll() function to this script below:

$('.scrollTrigger').click(function(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
});

4. CSS Style Switcher

Switching themes is a great way to vary the theme and look of a web page. Switching stylesheets may be necessary to accommodate different screen resolutions, or perhaps to allow users to pick a light background alternative to a dark design.

CSS Style Switcher

It’s quite easy to do (really). Include the following jQuery script to the <head> of your HTML file.

<script type="text/javascript">
  $(".styleswitch").click(function() {
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
  });
</script>

To give options to the user for switching styles, just assign the styleswitch class to an HTML element (a elements would be good candidates), using the rel attribute to reference the location of your stylesheets.

<a href="#" class="styleswitch" rel="dark.css">Dark</a>
<a href="#" class=" styleswitch " rel="light.css">Light</a>

For example, if this is how you reference your default stylesheet:

<link rel="stylesheet" href="dark.css" type="text/css">

Clicking on the second link above will modify the DOM in such a way that the href attribute will take on the value of light.css.

5. Resizing text dynamically

This common trick among designers can make it easy for users to control how big or small they see the text on a web page without having to modify their web browser settings.

Resizing text dynamically

Using links to increase, decrease, or reset the text size of a webpage can easily be implemented using jQuery.

The following snippet from Queness will do the trick.

<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.section2');  
  section = section.join(',');
  
  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize);  
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });

  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

In the code above, you will notice an array called section. This defines which HTML elements can be resized.

From there, we can use basic HTML to create text-resizing links.

<a class="increaseFont">+</a> | <a class="decreaseFont">-</a>
| <a class="resetFont">=</a>

<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

6. Animated accordions for interactive content displays

Accordions that use jQuery can take on many forms, from displaying only necessary content, to creating expandable/collapsible navigation menus.

Designers can create accordion menus with some pretty cool animation effects using jQuery.

To view a demo of an accordion in action, check out the accordion over on WebDesignerWall.

Using the jQuery script below, we can use a mixture of <h3> and <p> elements to hide and show the paragraphs below the heading tags.

<script type="text/javascript">
$(document).ready(function(){
  $(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
     .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});
</script>

Note: If you’d like a faster animation movement, modify the slideToggle and slideUp methods so that it passes either the strings 'normal' or 'fast', or simply use an integer in millisecond units (such as .slideUp(500) for a half -second transition).

Below is the HTML we need to use. As you can see, it’s pretty straightforward and all we need to have is the div.accordion element, and <h3>/<p> pairs inside it.

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Take a closer look at this and some other jQuery tricks over at WebDesignerWall.

7. Tooltips to convey contextual messages on an element of interest

Tooltips are an easy way to give users more information when they hover on a particular page element. By hovering over an element of choice, the user can view a simple tooltip that pops up displaying links, content, a larger image, and other contextual information that they might find useful.

The image above is actually an example of a demo page in action (from CSSGlobe). To download this script set, head on over to their write-up of it called Easiest Tooltip and Image Preview Using jQuery.

Here is the HTML markup you need, which, as you can see follows unobtrusive JavaScript best practices by using a class (.preview)to indicate which elements will have tooltips.

<a href="image.jpg" class="preview" title="Image">Preview</a>

8. Modal windows to replace pop-up windows

Modal windows can be used to display images, content, and even iFrames.

Modal windows to replace pop-up windows

A dialog box like this takes more than just a few snippets of code, it takes an entire tutorial. Above is an image of what the NetTuts+ tutorial for creating a modal dialog box can do. It is a great tutorial to follow if you would like to make your own, and customize it along the way.

jQuery Plugins for Modal Windows

Instead of creating your own jQuery script for modal windows, there are plenty of plugins that you can use to get the job done; below are just a few of them.

FancyZoom

WordPress jQuery Lightbox Plugin

SimpleModal

9. Tabbed interfaces for displaying content

Tabs are a great way to save space, just like an accordion. With a rise in minimalist designs, designers need new ways to decrease the space that web page content can take up. Tabs are also a great way to organize information on a web page, making the design much more user-friendly. The image below showcases a tabbed area demonstration using the jQuery UI tabs.

Tabbed interfaces for displaying content

10. Using jQuery UI for easy widget implementation

The last "trick" for designers is easy: take a look at (and learn about) the jQuery User Interface (jQuery UI).

Basically, jQuery UI extends the jQuery core library to give you access to useful and common UI components (widgets) such as date pickers, accordion, tabs, sliders, and more.

To make things easier for designers wanting to save time and coding requirements, they have provided a nifty tool for quickly testing and creating your own jQuery UI themes, aptly called ThemeRoller, (which is also available as a Firefox bookmarklet).

Needless to say that there are plenty of features that come from jQuery UI that let designers "Code Less, Do More."

Wrapping Up

Many visual effects and impressive interaction can be achieved using jQuery. The above ten tips may be common and incredibly useful, but the power of jQuery does not stop there. I hope that this post has gotten you interested enough to keep exploring and learning more about this designer-friendly JavaScript library.

Please share any additional plugins, tutorials, and jQuery tricks that may help your fellow web designers in the comments.

About the Author

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. In her spare time she maintains Webitect.net, a resource blog for webmasters. She also writes for top blogs like Smashing Magazine and Web Designer Depot. You can get a hold of her through her blog, or follow her on twitter – @Webitect

This was published on Sep 29, 2009

53 Comments

Cameron Baney Sep 29 2009

Great article. I got into jQuery about a year ago and I love it. It is a great library and offers designers the tools we need to add flair to our websites without needing to know how to program. Plus, there are so many resources for jQuery plugins.

Antonov Igor Sep 29 2009

Thanks! Very good!

Hugh Collier Sep 29 2009

Superb collection of resources. Great stuff!

I love the rounded corners one. I’m re-building my portfolio site at the moment and I was going to use CSS3 for rounded corners. Mainly because not having rounded corners doesn’t particularly harm the design and the people using decent, modern browsers get a bit of eye-candy denied to the fools using IE. CSS wouldn’t validate then though so I’ll probably use this method.

Thanks for helpful and informative post.

Hugh Collier Sep 29 2009

Superb collection of resources. Great stuff!

Thanks for helpful and informative post.

Carlos Sep 30 2009

Great article, thanx for the resources, i’ll check all your posts, now i´ve just added this article to my personal blog.

choen Sep 30 2009

nice list ‘jquery’, how about the navigation menu like dropdown.

Michel Morelli Sep 30 2009

Thanks for this article. I have “bookmarked” it and the links.

geekbay Sep 30 2009

For the Equal-Height Columns, i think that you have missed something, if you make

equalHeight($(“.col1″));
equalHeight($(“.col2″));
equalHeight($(“.col3″));

you will have nothing done, col1 will stay in his height, same for col2 and same for col3 because they are alone, and we have nothing to compare with.

the right way to do this it’s like this:

then equalHeight($(“.column”));

with this, the script can compare the height of the differents columns and equal them.

look at the source of the exemple in cssnewbie for more info:
http://www.cssnewbie.com/example/equal-heights/

geekbay Sep 30 2009

from what i see some text in my comment is missing

the right way to do this it’s like this:

div id=”col1″ class=”column”
div id=”col2″ class=”column”
div id=”col3″ class=”column”

then equalHeight($(”.column”));

Jasmin Halkic Sep 30 2009

Nice post. Thanks ^_^

Rahul Chowdhury Sep 30 2009

Thanks for these, I like the SimpleModal, will use it, thanks. Good Post!

Jouko Sep 30 2009

Thanks for this list. It was usefull.

Your version of Equal-Height Columns doesn´t work. Each column div should have the same class like it is in the original version.

ghdp Sep 30 2009

Excellent tutorial. I can finally “code” in jQuery.

Jay Sep 30 2009

I already use some, but it’s nice that this article hold them all together for future reference.

Kayla Sep 30 2009

@geekbay

Thanks for noticing that, there must have been some error in my writing the post and trying out the method!

Like he’s already said, anyone having trouble with this one can find a better example and how-to with correct code here: http://www.cssnewbie.com/example/equal-heights/

seutje Sep 30 2009

I think I just threw up a little in my mouth, are you seriously suggesting we use js to fix crappy designs?

Thanks for the extra work we’ll be getting in the IRC channel thanks to this article :(

Gilles Sep 30 2009

For EqualHeight, there is no need to create another class…

Juste write:
equalHeight($(“.col1, .col2, .col3″));

NicoF Sep 30 2009

Excellent jQuery tips + written by a 20 year old beauty with brains…a killer combination for every developer :-).
Well done!

Eric Martin Sep 30 2009

Great list. Thanks for including SimpleModal!

Redstage Magento Sep 30 2009

Thanks for the article. It really helped out a lot. Keep them coming!

Abu Farhan Sep 30 2009

excellent collection, I need full tutorial for rounded corner, but now can’t access the source

Rahul - Web Guru Sep 30 2009

Great jQuery tricks sumarized. Tweeted and bookmarked.

Paul Datta Sep 30 2009

Nice article. I have often used a lot of jquery code to fix styling (css) like the “Equal-Height” tip but one should only do this as a last resort as it could become an overhead.

Riku Sep 30 2009

Excellent and useful compilation, can’t seem to get nr.4 CSS switcher, to work though.

mWolff Sep 30 2009

Another 3 useful modal plugins: Facebox (http://famspam.com/facebox), Fancybox (http://fancybox.net/) and my own mashup of the previous 2 , fancyBox (http://bitbonsai.com/facybox)

My 2 cents, nice post…

Vikas Ghodke Sep 30 2009

Great Tutorial now i think i need to start learning jquery :D

Matthew Heidenreich Sep 30 2009

great article, thanks for the post

Jonathan Sep 30 2009

Thank you. I always found the tabbed interfaces a wise way to deliver a lot of words in a small amount of space.

Bratanon Sep 30 2009

Nice tutorial! jQuery is awesome!

health fitness care Oct 01 2009

Thanks for nice informations

Lincoln Plumber Oct 01 2009

That is one amazing collection of jquery based teachings!! Good work.

The Modal windows to replace pop-up windows look extremely cool on any website – especially the form. I will be using that in the future!!

Web 2.0 Oct 01 2009

Useful tricks, thanks..

om ipit Oct 01 2009

nice post, i need this…

zoel Oct 01 2009

great!, your tricks is very needed for me and any web dev, thanx!

Josh Oct 01 2009

Great collection. Thanks!

Matthieu Oct 01 2009

great tutorial, Im going to change some stuff on my website!

Designect.Com Oct 01 2009

This collection help me very much!!! Thank you!

Tom Oct 02 2009

Great list with great jQuery stuff. Thanks for sharing your knowledge with us.

Anakin Oct 02 2009

Thanks for the examples of essential jQuery usage. I am convenced to use some of them asap.

Keith Davis Oct 03 2009

Great overview of the jQuery that is out there.
I’ve used bits and pieces of jQuery such as fade images in and out, image scroller and the accordian and have always been pleased with the result.
One of the problems with trying to convince people to use jQuery, is the bad reputation javascript built up in the past… bloated code that Googlebot couldn’t read… but now in the shape of jQuery it is back in fashion.

pensev Oct 03 2009

Thanks for this great collection…

Chris Oct 04 2009

Great Post. Thanx.

euingtsma Nov 07 2009

Really nice article! thank u so much cause I’m a noob~ really helpful,really :)

BEBEN Jan 28 2010

a beautiful author…eh…jquery…:D

Gunner Mar 15 2010

Kayla, you have 20 years? Incredible, I love you!!

Zena Jun 03 2010

Nice work. I love it.

Arnold Sep 05 2010

Very nice,

I can’t get the styleswitch working. In Chrome I can see the link with the style being set to the chosen style but it immediately gets reset to the original value.

Keep up the good work!

john Sep 28 2010

thanks..
your work save me a lot of time

Robbie Douglas Feb 17 2011

This article will be quite useful

GaDo Apr 23 2011

How i can put a custom font in my website ? IE6 Compatible ?

Thanks

roda Sep 19 2011

so helpful! thanks for the post! ^^,

Raghib suleman Oct 17 2011

Thanks for sharing, good work…

amir Nov 25 2011

Thanks for sharing… I Like You.

This comment section is closed. Please contact us if you have important new information about this post.

10 Easy jQuery Tricks for Designers

1. Equal-Height Columns

2. Rounded corners without the HTML mess

3. Scrolling Content

4. CSS Style Switcher

5. Resizing text dynamically

6. Animated accordions for interactive content displays

7. Tooltips to convey contextual messages on an element of interest

8. Modal windows to replace pop-up windows

jQuery Plugins for Modal Windows

9. Tabbed interfaces for displaying content

10. Using jQuery UI for easy widget implementation

Wrapping Up

Related Content

About the Author

53 Comments