steve steve - 3 months ago 12
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.

DEMO http://jsfiddle.net/xBB5x/12034/

// no auto hide intially
$('#resize').resizable({
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 );
});

Answer

You need to change your .hover function a bit:

$( "#container" ).hover(function() {
$('.resize_element').hide()
}, function(){
$('.resize_element').show()
});

Working Fiddle here: http://jsfiddle.net/xBB5x/12035/

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

Comments