How to create resize handles for jqueryui’s resizable feature
Size matters not. Look at me. Judge me by my size, do you? Hmm? Hmm. And well you should not. For my ally is the Force, and a powerful ally it is. -Yoda
Create a 10px x 10px red square and save it as gif and call it resize-handle.gif and store it in your images folder. Then use jqueryui to assign resizable() on an element that you wish to resize. In the css file that came in with jqueryui (jquery-ui-1.8.13.custom.css in my case), around line #311, substitute the style declaration for the resizable ui with this
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 10px; width: 100%; top: 0px; left: 0; background: url(images/resize-handle.gif) top center no-repeat; border-top: 1px solid #f00;}
.ui-resizable-s { cursor: s-resize; height: 10px; width: 100%; bottom: 0px; left: 0; background: url(images/resize-handle.gif) bottom center no-repeat; border-bottom: 1px solid #f00; }
.ui-resizable-e { cursor: e-resize; width:10px; right: 0px; top: 0; height: 100%; background: url(images/resize-handle.gif) right center no-repeat; border-right: 1px solid #f00; }
.ui-resizable-w { cursor: w-resize; width: 10px; left: 1px; top: 0; height: 100%; background: url(images/resize-handle.gif) left center no-repeat; border-left: 1px solid #f00; }
.ui-resizable-se { cursor: se-resize; width: 10px; height: 10px; right: 0px; bottom: 0px; background: #f00; }
.ui-resizable-sw { cursor: sw-resize; width: 10px; height: 10px; left: 0px; bottom: 0px; background: #f00; }
.ui-resizable-nw { cursor: nw-resize; width: 10px; height: 10px; left: 0px; top: 0px; background: #f00;}
.ui-resizable-ne { cursor: ne-resize; width: 10px; height: 10px; right: 0px; top: 0px; background: #f00;}
That’s it.
Wonderful, just what I was looking for. I’m using it here:
http://www.whooshtranscription.com/sheldon-amy-marriage-and-a-gravy-boat/
One slight issue, when you scroll the handle remains fixed. It does not move with bottom border of the DIV (or is not fixed to the bottom border). Anyway to solve this?
Thanks.
Hi Kongo, I checked out your page and noticed the issue. I tried a few things and the solution seems to be something on the following lines.
Pass a jquery event handler for the scroll event on the div with the id ‘transcript’. Basically on $(‘#transcript’).scroll(function(){ //calculate something here });
In this function block you d need to calculate the distance that the item was scrolled using a combination of $(window).scrollTop() and the ‘transcript’ div’s height and distance from the top to generate the exact number for the ‘bottom’ property of the ‘ui-resizable-s’ element.