Jquery resizable does not work

i am trying to use jquery-ui resizable.

here i am creating the resizable:

jQuery("#id404").resizable();

here is the div after i created the resizable.

<div 开发者_StackOverflow中文版style="right: 7px; top: 120px; left:0%; bottom:340px; position:absolute; overflow:visible; z-index:2; cursor:pointer;">
   <div 
      id="id404" 
      name="resizable_div" 
      class="ui-resizable" 
      style="position:relative; width:100%; height:100%; overflow:hidden;">
   <div class="ui-resizable-handle ui-resizable-e"></div>
   <div class="ui-resizable-handle ui-resizable-s"></div>
   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
</div>
</div>

now, this does not work.

although the div becomes resizable (the handles appear, the icon changes etc) when i'm trying to resize the div box, it stays the same size no matter what i'm doing. The resize process does occur, because while debugging this, the onStop and onStart callbacks did fire.

anyone can tell me what i did wrong?

i assume it is something to do with absolute divs.

thanks,

Tal

I think you have a styling issue here. You have a container DIV with fixed High and Width. You are putting your re-sizable DIV inside it. So I think the container DIV is blocking the resize process.

Try to get rid of that DIV first to check if it's not the problem.

The targeted ID takes on the parent's width and height, and yet has overflow hidden, so it cannot be resized beyond the parent's dimentsions.

Well, found out what was the problem, but i have no idea why it happens.

well, i have atached to body:onresize event a function which draws everything from scratch. this is because i have a full page web and every resize of the body i want it to be re-rendered.

but apparently this event is fired every time jquery resizes the div, so it seemed like nothing happened.

for now, i'm setting a global flag "resize" when i start jquery resizing, and ordering the re-rendering function to return if this flag is up.

but i don't know why would the body's event would fire when an internal div is resized.

Try to make parent div resizable and use this syntax :

$(selector, context).resizable({option1: value1, option2: value2..... });