The best place to *find* answers to programming/development questions, imo, however it's the *worst* place to *ask* questions (if your first question/comment doesn't get any up-rating/response, then u can't ask anymore questions--ridiculously unrealistic), but again, a great reference for *finding* answers.

My Music (Nickleus)

20150909

[SOLVED] dynamically created jquery-ui ".resizable" div not resizing

i have jquery code inside a document.ready function that initializes all existing ".resizable" divs with a list of options n custom event listener functions
here's how i was able to add a dynamic jquery-ui resizable div to the HTML DOM n initialize it so it's immediately resizable AND has the same options config that the pre-existing resizable divs got in the main document.ready resizable declaration:

below is a jquery method  where i create a dynamic div (elem), with an inner div w class "resizable ui-resizable" that i want to initialize as "resizable":

$(".selector").on("someevent", function(){
  ...
  // the dynamic div, elem, gets a "resizable" child div
  elem.html('<div class="resizable ui-resizable"><p>dynamic, resizable div</p></div>');
  ...

  // get the resizable options(+event functions: create, start, stop, resize)
  var options = $( ".resizable" ).resizable( "option" );
  // get the elem div's inner "resizable" div
  var resizeElem = elem.find('.resizable');
  // initialize it w the options declared elsewhere in the document.ready script--we don't need to write double code
  resizeElem.resizable(options);
  // this last part was key to get it working--u have to get the instance, then initialize THAT w the options TOO!
  var resizeInst = resizeElem.resizable("instance");
  resizeInst.option( options );
}


No comments:

Post a Comment