steve steve - 2 months ago 10
Javascript Question

Jquery UI resizeable autohide handle

I would like the resize handle to show initially when the element is loaded. Then once the user has hovered over the red container I would like to invoke the autohide option on the handle. Therefore it will then have autohide behaviour from that point on.

I have set the code to apply the auto hide option on hover but for some reason it isn't working.


// no auto hide intially
aspectRatio: true,
// autoHide: true,
handles: {
se: $('#resize').find('.resize_element')

// apply autohide behaviour when container is first hovered over
// not currently working though?
$( "#container" ).hover(function() {
$('#resize').resizable( "option", "autoHide", true );


You need to change your .hover function a bit:

$( "#container" ).hover(function() {
}, function(){

Working Fiddle here:

And if you don't want the resizer to re-appear then remove the second function that brings it back.