10 jQuery Snippets Designers Should Know

JQuery may be fairly new but it is already used on thousands of web pages around the globe. If you are designer, we are sure you are familiar with this one as well. It is perhaps one of the more vast libraries to be used and can do amazing stuff to your websites. Moreover, it is definitely the most common libraries to be inserted onto a web page, and using jQuery you can very easily manipulate DOM; easily and quickly. While you could write your own codes, employing the use of jQuery can make your work faster and all the more enhanced. Also looking for the appropriate jQuery snippets may take time for you so we took the liberty to scour the internet and came up with these 10 jQuery snippets designers should know of.


You May be interested on

The reason why jQuery is so popular amongst masses is its simplicity. It would seem that you could pretty much accomplish anything with incredibly powerful library. While you have many options available, there are some snippets that come in way handier than the others and that is what this post is all about. Check out the 10 snippets below and let us know what you think in the comments below.

10. Zebra Stripped Unordered List

$(‘li:odd’).css(‘background’, ‘#E8E8E8’);

You can easily create a zebra striped unordered list using this little snippet. This would place your defined background on every odd list item so you can place the default for the even ones in your CSS file. That’s where the zebra thing comes in. This snippet can be added to any type of markup, from plain divs to tables; anything you can come across that can be zebra striped.

9. Make Two Divs the Same Height

$(‘.div’).css(‘min-height’, $(‘.main-div’).height());

As the name suggests, if you have two divs to have the same height you can simply use this snippet and it would enable just that. It does not matter what sort of content the divs may contain, this snippet would just work. In this particular case the height is set at minimum by default which means that it can be bigger than the main div but would never be small. This comes in very handy for a  lot of different websites.

8. Simple Accordion

// Close all Panels
// Accordion
var next = $(this).next();
return false;

You can use this script for a quick accordion. It is a very simple method and you do need is the code which we pasted for your convenience.

7. Toggle Fade/Slide

// Fade
$( “.btn” ).click(function() {
$( “.element” ).fadeToggle(“slow”);

// Toggle
$( “.btn” ).click(function() {
$( “.element” ).slideToggle(“slow”);

This is perhaps one of the more common animations used on the web all thanks to jQuery. Sometimes you would want to show an element when you click something and for that, this little snippet is just perfect.

6. Stop Loading of Links


There are times when a designer does not want the links to redirect to a certain page or reload them. Sometimes, designer would want the link to trigger some other script. If that is the case, you may want to give a look at this very light little snippet because this little piece of code will manage to do just that.

5. Disabling Input Fields

$(‘input[type=”submit”]’).attr(“disabled”, true);

There are times when a designer would want the submit button of a form to be disabled. There are cases when a designer would even want some text inputs to be disabled. The designer would want to keep this intact until the user performs a certain action for example when at the end of a registration you check the tick box that asks if you agree to the terms and conditions. Use this line of code and it will do just that.

4. Toggle Class on Hover

}, function(){

You notice that visual change on a clickable element when you hover over it? Well, if you are designer, you definitely love that effect. It is only natural. When we hover over something, we want some sort of a visual change which should suggest that the item is either clickable or something like that. This particular snippet mentioned above accomplishes just that. It would add a class to your element when a user is hovering. If the user stops hovering, the said class is removed. All you need to is add the necessary styles in CSS and voila.

3. Fix Broken Images Automatically

$(this).attr(‘src’, ‘img/broken.png’);

There are times when several broken image links appear on a particular website. When that happens, a designer would usually replace them one by one. That is time-consuming and honestly, very dull. It’s not even very easy to do; imagine a thousand pictures that need replacement. Well, thank God for jQuery, because the tiny little snippet mentioned above will replace those images for you and save you loads of time and headache. Even if you don’t have any broken images link, adding the above snippet will not harm you just in case.

2. Checking if Images are Loaded

$(‘img’).load(function() {
console.log(‘image load successful’);

Sometimes a designer would need to check if the images are fully loaded in order to continue with the scripts and other coding work. Well, adding this little snippet will help you do just that and very easily too. You can also check if one particular image was loaded by replacing the img tag with an ID or otherwise a class. See ti is easier that way.

1. Back to Top Button

// Back To Top
$(document.body).animate({scrollTop : 0},800);
return false;

//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>

You must have noticed that a plugin is not necessary to create a simple scroll to top animation. Just use the snippet above and you will have access to a very way scrolling to top without having to put your servers through the extra burden (even though minute) of a plugin.

Let us know if these plugins came in handy or if we were any help. If so, we would like to make more of such lists for your convenience. As always, your comments are welcome.

What do you think?

0 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

Inspiring Tomorrow’s Web — 20 Best Flat Ready-Made Templates

15. FAQ Box

18 Widgets to Enhance Adobe Muse