jQuery Plugin To Create Resizable Elements - resizeablex
File Size: | 37.6 KB |
---|---|
Views Total: | 1158 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

resizeablex is a jQuery plugin that helps you create draggable and resizable DOM elements just like the Photoshop's resize tool.
How to use it:
1. Load the required stylesheet to style the resizable area & corner anchor points.
<link rel="stylesheet" href="jquery-resizeablex.css">
2. Create a resizable element.
<div class="resizable-element" id="demo"> <div class="content"></div> </div>
3. Style the resizable element and its inner content.
.resizable-element { width: 200px; height: 150px; left: 30%; top: 10%; z-index: 3; } .content { position: absolute; width: 100%; height: 100% }
4. Load jQuery library and the resizeablex plugin at the end of the document.
<script src="jquery.min.js" ></script> <script src="jquery-resizeablex.js" ></script>
5. Call the plugin to make the element resizable by dragging & dropping the corner anchor points.
$('#testelement').resizeablex();
This awesome jQuery plugin is developed by xiilei. For more Advanced Usages, please check the demo page or visit the official website.