CODEWITHSUNDEEP
jqueryjquery-ui-resizable
Barry Watts
Barry Watts

Reputation: 794

element only resizable when element has been clicked on jquery

Currently I have multiple elements on the page and they are all resizable.

To stop all the resizable handles from being shown all the time I currently have them set to 

   $("#selector").resizable({autoHide:true});

This makes the resizable handles hidden unless the element has a mouseover event.

What I need is the resizable handles to only show when the element has been clicked on and then the handles to disappear 'onblur'

I cannot seem to find anything in the jquery for this.

Will I have to create a new resizable event for each 'onclick' event?

I am looking for a simple one liner or similar.

Can anyone help point me in the right direction?

Thanks in advance

Upvotes: 0

Views: 545

Answers (3)

Gourav
Gourav

Reputation: 1774

I hope this will help you http://jsfiddle.net/Rt2Zd/1/

   $(function() {

    $( document ).on('click',"#resizable",function(){
    $( "#resizable" ).resizable();
  });

     $('#resizable').blur(function(){
        $( '#resizable').resizable('destroy');
    });

  });

add tabindex to the div else the blur event wont be working.

   <div id="resizable" class="ui-widget-content" tabindex="1">
     <h3 class="ui-widget-header">Resizable</h3>
   </div>

Upvotes: 0

redV
redV

Reputation: 684

Here is a way to do it 

 $('#a').on({
   mouseenter : function(){
     $(this).resizable();
   }, mouseleave : function(){
     $(this).resizable('destroy');
   }
 });

Demo

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You could use following snippet:

$('#selector')
    .attr('tabindex', -1)
    .css('outline', 0)
    .resizable({
    autoHide: true
}).off('mouseenter mouseleave').on({
    focus: function () {
        $(this).find('.ui-resizable-handle').show();
    },
    blur: function () {
        $(this).find('.ui-resizable-handle').hide();
    }
});

Upvotes: 1

Related Questions