How to trigger jquery resizable from another event

Question

I have a window that is resizable:

$(".question-case-story").resizable( 
                                    {   handles:{'s': handle },
                                        alsoResize: ".question-case-inner",
                                        //minHeight: #,
                                        //maxHeight: #,
                                        maxHeight: $(".question-case-story").height(),
                                        resize: function (event, $this) { $(this).css({left:'inherit', top:'inherit'}); }
                                    });

When I click button to do something elsewhere, I want to cause this resize to happen automatically, but to a specific height (the window height). How can I do this?

I found a similar question, but it doesn't address how to set any specifics: How to trigger jquery Resizable resize programmatically?

Same thing here: http://forum.jquery.com/topic/triggering-resize-event-set-by-resizable

I'm running jQuery UI v. 1.9.2

Update: I can't just "set" the new height ($(thing).css('height', whatever)) because there are other things going on inside that div that interact with the resizable functionality.

Answer 1

That should do it:

var manresize=false;//Variable declared in a global scope    

$('#buttonid').click(function(){
    manresize=true;
    $(".question-case-story").trigger('resize');
});

Now you need to create a custom event called manualresize for example.

Then you attach that event's listener to your $(".question-case-story") object

$(".question-case-story").bind('manualresize',function(){
    //Same code that would run in the .resizable() 
    //method with a resize event trigger
});

Copy/use the code from the .resizable() widget that the resize event calls (not a 100% percent sure about this but I think that jQuery sadly does not use prototype) in your custom event

In your $(".question-case-story") object:

resize: function (event, $this) { 
            $(this).css({left:'inherit', top:'inherit'});
            if(manresize/*var set on manual trigger*/){$(this).trigger("manualresize");manresize=false;}
        }

Answer 2

If I understand correctly, and you just want the element to resize then just try:

$('#button').on('click', function(){
    $('.question-case-story').width(somevalue);
    $('.question-case-story').height($(window).height());
}