Maximizing / Resizing a dialog window in CKEDitor

Question

I need to programmatically maximize / resize a CKEditor IFrame dialog (i.e. a CKEditor dialog with an "ok" and "cancel" button, and an iframe in it for the rest). I would need the dialog to stay centered on the screen.

I can see only functions to resize and re-position the window, but to use those, I'd have to calculate the window dimensions first to re-center it. This is stupid for a number of reasons, the API should handle that completely.

Is there an official API function to do this, or a safe workaround?

I can use JQuery but would really like to use native functions for this.

Answer 1

If you have both resize AND re-position, it can't be that hard do one function:

(it's pseudo javascript, since i don't have time to polish it, so basically idea)

function dialogResizeCentered (d,w,h){ //d-dialog, w,h-width, height
  var sw,sh; //screenwidth, screenheight
  var rx,ry; //null atm, for resize x, resize y
  get sw, sh from window. object
  rx = parseInt(sw/2-w/2);
  ry = parseInt(sh/2-h/2);
  d.call resize (w,h);
  d.call reposition(rx,ry);
}

and then anytime you can just call dialogResizeCentered(d,600,400);

or?

Or if you want your dialog to stay centered, i'm sure there is something like window.onResize event to call this function.

I hope I understand correctly :)

Answer 2

I'm using CKEditor myself but have opted to use jquery's UI dialog for my custom dialogs as it is a lot more flexible and feature-rich out of the box, it's available at:

http://docs.jquery.com/UI/Dialog

But if you prefer on using a custom CKEditor dialog then jQuery's position():

http://api.jquery.com/position/

height(), width() and offset() are invaluable in determining the size and position of the dialog:

http://api.jquery.com/category/manipulation/style-properties/