Created: 2012-03-23 20:24
Updated: 2013-11-25 13:29

gripHandler jQuery plugin

Enables the resizing of an element using a grip. Download the latest minified version.


The plugin is tested on jQuery 1.7+, but older versions of the library should also work. Both the jQuery plugin library and the plugin should be included on the page:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

Add a grip to the element you wish to resize:

<div class="some-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis, nisl in ultricies vulputate, risus nisl semper dolor, fermentum consequat felis augue quis dui. Aenean tempus iaculis risus, sit amet fringilla augue eleifend sed. Nullam congue aliquam mauris, et vulputate augue feugiat eu. Maecenas laoreet, nulla in blandit viverra, nibh nisl porttitor metus, et imperdiet justo sapien non felis. Suspendisse commodo mollis orci at auctor. Nulla blandit, libero vel tristique gravida, ipsum sem sollicitudin eros, eu rutrum enim orci vitae ligula. Sed arcu velit, scelerisque ut dignissim tincidunt, rutrum ut velit.</p>
  <div class="grippie"></div>

Activate the plugin on the element(s):

(function($) {
    cursor: 'n-resize',
    gripClass: 'grippie'


  • cursor - The cursor type dislayed when hovering over the griphandle. Default is auto.
  • gripClass - The class of the griphandle. Default is grip-handle.


Check out the demo @ jsfiddle.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more