5 Useful jQuery Snippets

5 Useful jQuery Snippets
1. Back to Top Button

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

This code can be used to create a smooth, simple back to top button — a trendy and functional item to have on any website. Just make sure you use this HTML code or something similar (with the a tag having a class of “top”) to create the actual button: <a class=”top” href=”#”>Back to top</a>

2. Enabling/Disabling Input Fields

$('input[type="submit"]').attr("disabled", true);

For when you don’t want a user to be able to input to a certain field or submit a form (maybe at all, maybe until they’ve filled out some prerequisite info). The top line of code will disable an input element, and the bottom line will enable it.

3. Zebra Striping

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

Zebra striping is a common stylistic choice often seen in lists and tables. The code above will add zebra striping to a list.

4. Prevent Link Functionality

$(“a.disable").on("click", function(e){

The code snippet above will take away all functionality from a link. Whichever link you place in the selector will not work at all when a user clicks it. Just make sure you specify which link you want to not work, otherwise you could accidentally end up disabling all your links by mistake.

5. Toggle Classes


This snippet is super useful for changing the styling, appearance, and possibly even functionality of an HTML element by adding or removing a particular class to it. Great to use as a result of a click trigger. 

5 of the Funniest jQuery Plugins

Sometimes the coolest jQuery plugins are the ones that really don’t serve a purpose at all. 

1. Bacon!

Bacon! (don’t forget the exclamation point!) exists literally to add strips of bacon to your webpages. If you ever feel like you might need to spice up a dull page or a boring block of text…why not add some bacon?

Raptorize is a jQuery plugin that, at the click of a button, will unleash a vicious raptor (complete with scary sound effects) upon your users’ browsers (or, if you really want to scare people, you have the option to allow the raptor to load and appear on a timer for your unsuspecting users).

RevRev.js is a self-proclaimed “mostly pointless jQuery plugin” that you can use to reverse the direction of some of your letters. Like they said, it’s mostly pointless, but it does make for a unique look and could maybe, possibly, potentially have some use on some site somewhere (maybe a site that sold funhouse mirrors?). You can also add random caps, random spacing, change the font-size, etc. 

This plugin will turn any HTML element into a kitten, if you want it to.

Cornify is the jQuery plugin of Lisa Frank’s dream. Basically, it adds all sort of rainbow, unicorn, glittery, happy stickers and images to your page at the click of a button. If you feel like something is missing from one of your latest projects and you can’t quite put your finger on it, have you stopped to consider that adding a glittery unicorn could do the trick? Cornify your page and see for yourself.

How to Get Cursor Coordinates Using jQuery

How to Get Cursor Coordinates Using jQuery
It's fairly easy to get the coordinates of your cursor using jQuery. While this information might not be particularly useful to a lot of developers, there are definitely occasions where the x and y coordinates of your cursor can be particularly useful.

The code snippet below shows you how to find the x and y coordinates of a cursor when it's within a particular HTML element (a box, a div...whatever you like), and then display those coordinates through an alert message. The code can be totally customized to have the coordinates instead print to the console, or to have the cursor coordinates be found within the body or the window rather than within a particular element. Use the snippet below as a jumping off point for your cursor-finding code:

$(function() {
$("#coordinates-box").click(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert("X coordinate: " + relativeX + "  Y coordinate: " + relativeY);

Format Your jQuery and JavaScript With This Useful Tool

If you've ever worked with improperly formatted code before, you know what a total pain it can be to edit, add to, and even understand. Formatting is really important when it comes to jQuery and JavaScript. If code isn't formatted properly, there's a good chance you're going to miss some closing brackets or forgot a semi-colon or two.

So what do you do when you come across a JavaScript or jQuery file that looks a mess? You can go through it all yourself, or you can painstakingly format it by hand, OR you can use a jQuery formatter and reformat an entire file in a matter of seconds.

jsBeautifier is a free online JavaScript and jQuery formatter that will bring order and organization to your code files. It's totally customizable and gives you so many options for how exactly you'd like your scripts to be formatted. You can control anything from the number of indent spaces to whether or not you'd like the text to wrap.

Do you want to indent arrays? Do you want spaces between the "if" and the "()" in your if statements? This jQuery formatter will take care of all of that for you and more. If you're looking to make any JavaScript or jQuery code more clean and organized (or even looking to make sure your own clean code is consistent in its formatting) this is a great tool to use.

Best jQuery Plugin for Falling Snow Effect

With winter's sudden arrival and the holidays fast approaching, you may find yourself in the market for a plugin that allows you to add a falling snow effect to any of your pages. Our falling snow plugin of choice is the Snowfall 1.6. Using this plugin, you can create a falling snow effect that covers your entire page, or just small sections of a page.

One of the great things about this plugin is how customizable it is. You can specify the size and shape of the snowflakes (you can make them really small, bigger, or even have them appear in a classic snowflake shape -- see example in image below). You can also specify the rate at which the snowflakes fall, the amount of snowflakes that appear on the screen at one time, and whether or not the snowflakes have a shadow attached to them. 

Another cool feature of this plugin is that it can also be programmed to collect snow on certain HTML elements. For example, you can have the snow particles build up on a particular div element or page section, which makes the snow effect look a lot more realistic than it might otherwise appear. You can also easily add a line of code that will stop the snow effect, in case you'd like to include a button that the user can click if they're not a fan of winter weather.