Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

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

Advertisement

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