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.

Read More»

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. 

Read More»

How to use jQuery to Prevent Multiple Form Submit for Efficient Forms

Often when a jQuery form is submitted, it can accidentally happen more than once. Depending on the server speed or the internet connection, the request to submit the form can go through slowly, which often leads to the user hitting the submit button more than once because they may think it isn't working. When this happens, the form can be submitted multiple times, which isn't a huge deal, but can definitely lead to some clogging up of your inbox.

A really good way to prevent this from happening is to use some simple jQuery code that disables the submit button after it's been submitted. The code to add this functionality to any of your projects is efficient, lightweight, and less than 15 lines.

  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });

When adding it to any of your projects, don't forget to add the specific form class or ID for the form you want to target if you don't want or need this snippet to apply to all the forms on your site.

Read More»

Create Blinking Text Without Using a Plugin

There are tons of jQuery plugins available for any kind of text animation. But the use of jQuery plugin should depend on what are you trying to achieve. One should be very careful while using any jQuery plugin as it comes with some bandwidth. Your website needs to download extra kilo bytes when it's viewed in browser and needs to load lots of plugins. Simple text effect can be easily achieved via plain jQuery code. You don’t need any jQuery plugins. In this post, lets us see how to create blink text effect with plain jQuery code.

jQuery, out of the box provides animation methods like fadeIn and fadeout. We can use these methods to create the blink effect. As blink effect involves fading in and fading out only. So let’s create a function which will create the blink effect.

function blinkText(elm){

$(elm).fadeOut('slow', function(){

$(this).fadeIn('slow', function(){

blinkText(this);

});

});

}

In the code above, first a call is made to the fadeout method, which when completed makes a call to function. And this function calls fadeIn method to fade in the text. And this method calls the blinkText method again to create an endless loop of fade out and fade in. And this results in creation of blink effect. Now all you need to do is to call this function on your DOM element.

In the following jQuery code, calls blinkText method on all DOM elements which are having blinkText CSS class.

$(document).ready(function(){

blinkText('.blinkText');

});

fadeIn and fadeout method takes milliseconds as duration. From jQuery documentation, durations are given in milliseconds, so higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

Read More»

5 Top jQuery Button Plugins

Looking for cool, different ways to style your buttons? With customizable colors, shapes, and hover effects, the styling possibilities are seemingly endless, and choosing how to design your buttons and input fields can sometimes be overwhelming. If you don't want or don't have time to deal with big styling decisions but still want your buttons to look great, check out any of these plugins below.

1. jQuery UI Button

The jQuery UI Button plugin is the official jQuery plugin to enhance the appearance of standard form elements such as buttons, and anchors. The enhancements includes options for active and hover styles as well.

2. Labelauty

Labelauty is a lightweight jQuery plugin that creates beautiful input fields such as radio buttons and checkboxes.

3. jQuery addToggle

jQuery's addToggle plugin creates a minimalist on/off switch that can be added to any of your projects. Features like color and size are easily customizable to blend in with your site's theme and design.

4. Checkbox-Field

Checkbox-field is a unique and useful plugin that will turn your mutli-select lists into beautifully organized and styled checkbox fields. Perfect for converting older, uglier designs and functionalities into something modern, new, and user-friendly.

5. Bootstrap Checkbox

The Bootstrap Checkbox plugin creates checkbox fields that draw inspiration from Bootstrap's button styling. If you like the style of the Bootstrap framework but aren't using it for your projects, this plugin is a great option for achieving the Boostrap look on some of your HTML elements.

Read More»