jQuery UI resizable not working at all

Question

Ok here is the problem. jQuery Resizable just does not work on this page: click here

Try it out on the grey box in the upper left corner.

What I want to do is make the shoutbox on the right size resizable. But it didn't work so I tried to just copy everything from the jQuery UI example page into my one and try it out. So I added the grey box the same way they did, using even the same css but it won't work.

Here's how the libraries are called:

 <script src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">

 google.load("jquery", "1.4.1");
 google.load("jqueryui", "1.7.2");

google.setOnLoadCallback(function() {

});

</script>

<script type="text/javascript" src="js/thickbox.js"></script>
<script type='text/javascript' src='js/jqueryEasingMin.js'></script>
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script>
<script type="text/javascript" src="js/shoutbox.js" ></script>
<script type="text/javascript" src="js/bbcode.js" ></script>
<script type='text/javascript' src='js/jqueryLoader2.js'></script>

script inside document ready function (like in example):

 $('#resizable').resizable();

CSS of the grey box:

<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>

I had to add the position and z-index parameters because of the design of my site but that seems not to affect anything.

And implementation:

  <div id="resizable"></div>

I think I'm missing something really obvious here but I can't see it. I even tried it with linking the jquery UI libraries to a local directory instead of using google's ones.

I would really appreciate a nod in the right direction. Thank you

Answer 1

There is supposed to be this right after calling jquery ui and css:

<script type="text/javascript"> 
$(function() {
    $("#resizable").resizable();
});
</script>

EDIT: Also, you need to include a theme for it to work correctly.