Unique jQuery-resizable jQuery Plugin – jquery-resizable.js

Layout
Demo    Download
File Size: 4.16 KB
Views Total: 1139 views
Last Update:March 26, 2021
Publish Date: December 18, 2015
Official Website: Go to website
License: MIT
Plugin Author: RickStrahl

The jQuery-resizable.js is resize the simple box element jQuery plugin that has no direct UI characteristics. It performs its functioning with mouse and touch functions for resizing and contrarily depends upon the CSS and HTML to manage the optical features of the resizing processes. Eventually, final outcomes are a much tiny element that’s lucidly reusable and this component offers an option to the user to adjust the box dimensions according to the requirement and need.

Table of Contents

How to use it:

To get started, you need to load the jQuery resizable plugin :

<script src="jquery-1.11.3.min.js"></script>
<script src="src/jquery-resizable.js"></script>

Call the function on target DOM element to make it resizable :

$(".rebox").resizable();

Other All Customize the plugin with the following options :

$(".rebox").resizable({

  // selector for handle that starts dragging
  handleSelector: null,

  // resize the width
  resizeWidth: true,

  // resize the height
  resizeHeight: true,    

  // the side that the width resizing is relative to
  resizeWidthFrom: 'right',

  // the side that the height resizing is relative to
  resizeHeightFrom: 'bottom',     

  // disable touch-action on $handle
  // prevents browser level actions like forward back gestures
  touchActionNone: true,

  // instance id
  instanceId: null

});

Callback functions :

$(".rebox").resizable({

  onDragStart: function (e, $rebox, opt) {
    $rebox.css("cursor", "nwse-resize");
  },
  
  onDragEnd: function (e, $rebox, opt) {
    $rebox.css("cursor", "");
  }

  onDrag: function (e, $rebox, newWidth, newHeight, opt) {
    // limit box size
    if (newWidth > 300)
      newWidth = 300;
    if (newHeight > 200)
      newHeight = 200;        

    $rebox.width(newWidth);
    $rebox.height(newHeight);

    // explicitly return **false** if you don't want 
    // auto-height computation to occur
    return false;
  });

});

It also provides a method to resize table columns via drag and drop :

<script src="src/jquery-resizableTableColumns.min.js"></script> 
.resizer {
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  left: auto;
  width: 16px;    
  cursor: col-resize;       
}

List Of Version :
  • 0.35
  • 0.32
  • 0.28
  • 0.26
  • 0.25
  • 0.20.0
  • 0.18.0
  • 0.17.0
  • 0.16
  • 0.15.0
  • 0.14.0
  • 0.13.0
  • 0.12.0
  • 0.11.0
  • 0.10.0

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins