This entry is in jQuery Plugins series that the readers love very much. Today, I would like to recommend you 5 new and useful jQuery Plugins that you should consider using for your next projects. Check out other posts in this series if you want more enjoyment.

MopBox

MopBox is similar to other jQuery box plugins. It overlays the DIV content, flash, image … on the current page. The display box can be moved by dragging and video and most interesting is the box have an awesome scroll-bar to change the display. It has been tested and works with all current major web browsers.

This plugin requires jQuery UI to enable draggable, resizeable features.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    $("#demoBtn").mopBox({'target':'#demo', 'w':270, 'h':240});
  });
</script>

Source: mopstudio (Japanese)

Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. Using Roundabout to animate your static HTML elements: turn-around, make a wheel… or even an angry man.

Basic Usage:

<script type="text/javascript">
   // <![CDATA[    $(document).ready(function() {
      $('ul#myRoundabout').roundabout();
   }
   // ]]> </script>

Source: Fred LeBlanc

[smartads]

Meerkat

Meerkat is a jQuery plugin created to slide or fade content in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. It’s using cookie to track if users don’t want to show the content again.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    meerkat({
        close: '.close-meerkat',
        meerkatPosition: 'bottom',
        animation: 'slide',
        animationSpeed: 'slow',
        height: '100px',
        background: '#463c30'
    });
  });
</script>

Source: Jarod Taylor

jquery.behavior

jQuery.Behavior helps you organize your JavaScript code into logical chunks called “behaviors”. It is a class that defines how a DOM object (and its contents, surroundings, etc.) will behave. Using behaviors, your complex web application can become a simple system of JavaScript classes.

Tutorial and Script by Rod Petrovic

jMaxInput

jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. You already know how Twitter limits the input text by 140 chars, so this plugin help you to do the same.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    $("#div").maxinput();
  });
</script>

Source: Codrops

jQuery is great and the amount of free extensions is simply amazing! The number of jQuery plugins that were created monthly is very hard to count and to know; And It is not easy to know which one is the nice one. In November 2009, 5 jQuery plugins were born and most of people believed that they are useful for web designers. Enjoy the 5 fresh jQuery plugins!

1. jQSlickWrap

jQSlickWrap is a jQuery plugin which enables you to easily and accurately wrap your text around the content of floated images. It implements a client-side version of the Sliced and Diced Sandbags method of wrapping text around an irregularly-shaped object.

Usage:
It’s as simple as:

$('img').slickWrap();

2. jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin. This plugin helps you to build a range slider with Safari Style. This one is really good one!

Usage:Available Options:

* from — [number] left limit
* to — [number] right limit
* step — [number] step of pointer
* round — [number] how many numbers after comma
* heterogeneity — [array] (percentage of place)/(value of place)
* dimension — [string] show this after number
* limits — [boolean] show or not limits
* scale — [array] labels under slider, ‘|’ — show just line
* skin — [string] if you define new skin, just write here his name, in sources defined blue skin for example

3. jQuery Shuffle Plugin

A jQuery plugin for shuffling a set of elements.

Usage:

To shuffle a set of elements use:

$(selector).shuffle();

or

$.shuffle(selector);

4. Flips

Plugin for creating sliding boxes, that allows to show more boxes
on one place. There is arrows to control which box is shown, many
options like speed, auto-change interval, sides, button labels can
be set.

It allows to show multiple columns/rows together

Usage:

$(document).ready(function() {
    $('#flips1').after( '<div class="to-flips" id="flips2">' + $('#flips1').html() + '</div>');
    $('#flips1').flips( { autorun_delay:0,    direction: 'left'   } );
});

5. JQuery Sprite Animation Plugin

Create quick sprite animation by applying an image and sprite options. You can specify sprite’s options like “frameWidth”, “startFrame”, “endFrame”, “direction” and others. The animation is applied to an element by one line of code. You can use this plugin as an alternative to the “gif” animation, using this plugin you can control your animation behavior from your JaveScript code, like defining the animation delay, having an infinite loop animation or you can specify the number of loops.

Usage:

$(document).ready(function() {
       $('#sprite1').spriteAnimation({
                numberOfLoops: -1,
                direction: 'ltr',
                startFrame: 0,
                endFrame: 36,
                interval: 20
       });
});