jQuery Plugin For Resizing Elements - oyoresizer

Resizing elements makes for a better user experience because it fits in their screens.

oyoresizer is a simple, lightweight jQuery resizable plugin that allows you to resize an element by dragging its right border. 

If you're looking to make an element on your website resizable, this is the plugin for you. You'll notice that the word "element" is vague. That's because this plugin doesn't restrict you to resizing just DIVs, Images, Paragraphs, or Iframes — anything that has a set width and height will resize with our plugin's magic.

How to use it:

1. Load the main script oyoresizer.js after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyoresizer.js"></script>

2. Initialize the plugin on the element which should be resizable.

<div id="example" class="resizable">
   I'm resizable
</div>

$(function(){
  var instance = new oyoresizer(".resizable");
});

3. Set the min/max width of the resizable element.

// oyoresizer(selectors, minX, maxX);
var resizables = new oyoresizer(".resizable", 160, 400);

4. The plugin also supports element dynamically generated by JavaScript.

<iframe id="frame-demo"></iframe>

$("#frame-demo").attr("src", "https://www.youtube.com/embed/r_W49tWhVys");
var instance2 = new oyoresizer("#frame-demo");
instance2.setSize(200, 600);

5. Set the resize margin in pixels.

instance.resizeMargin = 25;

---

This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.