Changing height of div

I have the following script which has a double click, on which I would like to change the height. I drag the div down until it is 200px heigh, but when I double click the handle, it will not go back to 0px.

Not sure wh开发者_如何学JAVAat I am doing wrong?

http://jsfiddle.net/rYFEY/30/

Like this? http://jsfiddle.net/rYFEY/33/

This is the new event handler. I added just one line:

    $('.ui-resizable-s').dblclick(function(){
        alert('clicked bottom handle');
        $("#divTest").height(0);
    })

$('.ui-resizable-s').dblclick(function(){
    $( "#divTest" ).css({height: 0});
})

Hope it helps.

This seems to work in FF:

$(document).ready( function() {
    $( "#divTest" ).resizable({
        maxHeight: 200,
        maxWidth: 100,
        minHeight: 0,
        minWidth: 100,
          handles:'s',
            resize: function(event, ui) {
            $( "#divHeight" ).empty().append("height: " + $(this).height());
        }
    });

    $('.ui-resizable-s').dblclick(function(){$( "#divTest" ).height(0);})
});

Try this

http://jsfiddle.net/rYFEY/38/

mm i can't seem to find the default function to reset the size thus i just manually set the div height back to zero.

$("#divTest").height('0');

so if this is the way you're going with and you want to keep more complicated behavior, then i would think you would to manually keep the previous height, width, etc into variables and manually set them again depending on the event triggered.