0

I am trying to make my dialog element resizable with jquery UI (latest) I have included the Jquery theme css and the latest Jquery UI library in my document.

But when i create my dialog HTML and insert in into my document the resizable function does not resize, the resize cursor is visible and also the resize handle is visible but when i drag nothing happens!

When i insert the HTML code for my dialog mannualy in my document and apply the resizable() plugin for that dialog the resizable() function works!

but when i insert the HTML code for my dialog with

$('body').append($('<div id="dialog">some text</div>')); and then do this:

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

the handle is visible but it wont resize.

It seems resizable() plugin does not work for new elements in the DOM?

I have wasted my whole day searching for the solution :(

Does someone know what is happening!

** EDIT **

I found it!! the resizable() plugin fires an event "resize" on the resizable element, and my plugin has a listener for that event, i thought it was only fired when my window is resized.

now i need to alter my plugin and find out if the window is getting resized or if its an element. thanks anyway guys!

SirCumz
  • 171
  • 1
  • 2
  • 14
  • Can you post a live example? because it seem to work just fine at http://jsfiddle.net/ZcVWp/1/ – Gabriele Petrioli Sep 29 '13 at 15:40
  • Have you checked your javascript console for errors? Try using setTimeout to delay the resizable call to see if there is some timing issue. – Ray Sep 29 '13 at 15:42
  • Its a plugin! i realy cannot post the source its to complicated. Your fiddle is working and i tried it on my localhost and its works to. so there must be something wrong in my plugin, my console says no errors, and no error in my css. The element exists in my document when i inspect my document using chrome, but whatever i try it just wont resize, draggable is working though, this is soo wierd – SirCumz Sep 29 '13 at 16:36
  • searched on the resize event and came up with this url: http://stackoverflow.com/questions/7494378/jquery-ui-resizable-fire-window-resize-event it solved my problem – SirCumz Sep 29 '13 at 16:59

2 Answers2

0

you have to use the css of jquery ui, or make something like this: you can work without css file, but you have to put css on the div element.

look this code:

import css of jquery ui:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

js code:

<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<div id="dialog" style="border:1px solid black;height: 100px;left: 0;top: 0;width: 100px;">some text</div>');
    $('#dialog').resizable();
});
</script>
Hugo Tostes
  • 412
  • 4
  • 13
0

Give the element a little time to render

    setTimeout(function(){
        $('#dialog').resizable();
    },500);
jonah
  • 213
  • 4
  • 16
  • This seemed to help for me. Set it to timeout of 2000, though. It's a bit of a temp fix. I noticed this behavior when 100% of the time the resizable logic was working as expected while debugging across the code. The next day I was no longer debugging, but when using the page, the element never showed on the page anymore. This was a good workaround for me at least. – InquisitionX Jun 18 '19 at 01:40