1

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.

Community
  • 1
  • 1
emersonthis
  • 32,822
  • 59
  • 210
  • 375

2 Answers2

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;}
        }
PhilTrep
  • 1,521
  • 1
  • 10
  • 23
  • I tried this before posting the question and it does nothing. No errors. No resizing. Just nothing. Could you explain how it should work? For example, if it did work, what size would it resize to? – emersonthis Jun 19 '13 at 18:12
  • It should simply trigger the resize event on the target object. The way your code works, it should be doing `$(this).css({left:'inherit', top:'inherit'});`, there wouldnt be any "resizing", only the `left` and `top` css properties would change. I would suggest using the browser log to find out if the event is triggered. I havent had any problems with that particular method in the past... – PhilTrep Jun 19 '13 at 18:19
  • I still don't quite understand. Are you saying that the code you posted should NOT be expected to cause the height to change/resize in my context? If so, what WOULD work? Is it because of my `resize:` callback? If I added specific height properties would that make it work? – emersonthis Jun 20 '13 at 03:45
  • I edited my answer to illustrate more clearly what I was trying to say, my apologies for the lack of clarity in my previous answer, it seems to come with the lack of sleep ;) – PhilTrep Jun 20 '13 at 14:21
  • Wow. It's more elaborate than I thought. Due to time, I have implemented a work around where I just hard set the height of the div and all of the contents individually. It seemed cumbersome at the time, but compared to this it might actually be simpler. Either way. Thanks for clarifying! – emersonthis Jun 20 '13 at 21:59
0

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());
}
TrippLamb
  • 1,422
  • 13
  • 24