How do you create a resizable and resize it in one go? (programmatically starting the resize)

I am trying to create a 开发者_StackOverflow中文版resizable div at the mouse position and resize it immediately to its desired size. My failed attempt so far:

http://jsfiddle.net/YKnfR/1/

Any ideas on how to achieve this behaviour?

Add this to your CSS above your #block1 selector:

#blocks > div
{
    width: 200px;
    height: 200px;
}

No need to get the resizable script involved until you want the user to resize it. Just FYI, that CSS would be clearer with a :not selector like this:

#blocks > div:not(#block1)
{
    width: 200px;
    height: 200px;
}

but IE doesn't support :not, and I'm not sure how well it degrades. That's why you need to put the first example above your #block1 selector.

You just have to add the desired size and width using heigth() and width():

$(document).mousedown(function(e){
    var block = $('<div id="new">New</div>')

    $('#blocks').append(block)
    block.css('left', e.pageX).css('top', e.pageY).resizable()

    block.height('40');
    block.width('40');
})

Alternatively, you can place those settings right into the css.