Create Resizable DOM Elements With jQuery - simple-resize

Create Resizable DOM Elements With jQuery - simple-resize

A simple and lightweight jQuery resizer plugin for handling custom resizing of DOM elements within the document.

This plugin allows your user to resize a given element by dragging the handle and stores the current status in the local using web storages.

1. Load the stylesheet jquery-simple-resize.css and JavaScript jquery-simple-resize.js in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="dist/jquery-simple-resize.js"></script>
<link rel="stylesheet" href="dist/jquery-simple-resize.css">

2. Apply the plugin to a DIV container and enabled/disable resize handlers as follows:

<div id="example">
  
</div>
$('#example').simpleResize({
  top: true,
  bottom: true,
  left: true,
  right: true,
  corner: true
})

3. Apply the plugin to a DIV container and enabled/disable resize handlers as follows:

$('#example').simpleResize({
  top: true,
  bottom: true,
  left: true,
  right: true,
  corner: true
})

4. Store the current resize status using HTML5 local or session storage.

$('#example').simpleResize({
  top: true,
  bottom: true,
  left: true,
  right: true,
  corner: true,
  store: true,
  storeKey: NAMESPACE,
  storeType: 'session'
})

5. You can also use the resizer plugin to create a split layout where the users are able to drag the handler to adjust the layout size.

<div id="vertical">
  <div id="vertical_box1" class="box-left">Left Content</div>
  <div id="vertical_handler"></div>
  <div id="vertical_box2" class="box-right">Right Content</div>
</div>
$('#vertical_box1').simpleResize({
  right: '#vertical_handler'
});

6. Event handlers.

$('#basic').simpleResize({
  // options here
}).on('resize:start', function(e, $handler) {
  // on start
}).on('resize:move', function(e, $handler) {
  // on resize
}).on('resize:end', function(e, $handler) {
  // on end
});

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

  • Publication date: 20.06.2019
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 247 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 247 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/nq206NnAaQvMpdIYO8aoDFMeUsMGZjnBuF1MCG8W', 'contents' => 'a:3:{s:6:"_token";s:40:"4TD6SEzEYsoFCi5NrfkFqcD7ceSg175F2OgflQmL";s:9:"_previous";a:1:{s:3:"url";s:89:"http://ivanovdmitry.com/blog/post/create-resizable-dom-elements-with-jquery-simple-resize";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/nq206NnAaQvMpdIYO8aoDFMeUsMGZjnBuF1MCG8W', 'a:3:{s:6:"_token";s:40:"4TD6SEzEYsoFCi5NrfkFqcD7ceSg175F2OgflQmL";s:9:"_previous";a:1:{s:3:"url";s:89:"http://ivanovdmitry.com/blog/post/create-resizable-dom-elements-with-jquery-simple-resize";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/nq206NnAaQvMpdIYO8aoDFMeUsMGZjnBuF1MCG8W', 'a:3:{s:6:"_token";s:40:"4TD6SEzEYsoFCi5NrfkFqcD7ceSg175F2OgflQmL";s:9:"_previous";a:1:{s:3:"url";s:89:"http://ivanovdmitry.com/blog/post/create-resizable-dom-elements-with-jquery-simple-resize";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('nq206NnAaQvMpdIYO8aoDFMeUsMGZjnBuF1MCG8W', 'a:3:{s:6:"_token";s:40:"4TD6SEzEYsoFCi5NrfkFqcD7ceSg175F2OgflQmL";s:9:"_previous";a:1:{s:3:"url";s:89:"http://ivanovdmitry.com/blog/post/create-resizable-dom-elements-with-jquery-simple-resize";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)