Tipsy: a jQuery Plugin for Tooltips

Tipsy is a jQuery plugin that creates a Facebook like tooltip effect generated from an anchor tag’s title attribute. It’s easy to use, really lightweight, and super customizable.



One of the coolest things about the plugin is that it allows you to specify the so-called “center of gravity” of the tooltips, or where each individual tooltip appears in relation to its anchor tag. The default location for the tooltips to appear is centered underneath its anchor, but with the gravity parameter, you can choose from 8 other positions.



You can also apply smooth fade in and out transitions to the tooltips so that they appear upon hover after a nice transition, and you can even combine the fade and gravity features. You can also add a delay, dynamically update the tooltip text, and use tooltips on input fields. 


If you’re looking for a good tooltip plugin, this has got to be one the easiest to use and most versatile plugins that will serve that purpose, and is definitely worthy of being included in your next project. 

5 Useful jQuery Snippets

5 Useful jQuery Snippets
1. Back to Top Button

$('a.top').click(function(){
$(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);
$(‘input[type="submit"]').removeAttr("disabled”);

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){
  e.preventDefault();
});

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

$(“.main”).toggleClass(“selected”);


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);
10
});
11
});

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.