jQuery UI risezable: resize from top left corner

jQuery UI risezable: resize from top left corner

I don't manage to resize a div from the top left corner.
How could I do?.
This is my attempt

HTML

  1.     <div id="chat-container">
  2.             <iframe id="chat-frame" src=""></iframe>
  3.         </div>

JS


  1.     $('#chat-container').resizable({
  2.         animate: true
  3.     });
  4.     $("#chat-container").resizable("option", "handles", "nw");

CSS

   
  1.     #chat-container {
  2.     display: none;
  3.     position: fixed;
  4.     z-index: 0;
  5.     bottom: 0px;
  6.     right: 10px;
  7.     width: 500px;
  8.     height: 200px;
  9.     text-align: right;
  10.     }
  11.     #chat-frame {
  12.     width: 100%;
  13.     height: 100%;   
  14.     }

In this manner it always scrolls from the default bottom-right corner.
As you can see I postioned the div in the bottom-right corner. For this reason I need to resize form the opposite corner.
Thanks in advance!