Question

I am working on a project where I need to resize a small pop-up window (which is a chat window of about 500x400px) to be larger to contain a different type of content in certain circumstances.

What is the best way to resize a small pop-up window to be larger? Is it best to just use:

window.resizeTo(width,height);

I looked for a jQuery way to do this, but didn’t see any. I was hoping there was a way to resize a window smoothly, but I don’t see any way. Am I missing something? The only other option I see is to pop-up a new pop-up from the old pop-up — which to me seams even worse.

Please, don’t respond with “don’t resize a window” — because I know that it sucks and is generally a bad user experience. However, I’m freelancing for a company that is working within the framework of a legacy system that hasn’t really been updated in a decade and this seems like the least bad option so far.

Answer 1

jQuery’s .height() and .width() functions should be able to handle this by running, for example:

$(window).height(400);

In addition, it sounds like you will need to get the size of the content BEFORE you do the actual resize function. If it’s a static value and you know beforehand, simply hard-code the values. If it’s dynamic, you can do the following:

$(window).height($('#yourcontent').height());

You might need to do some testing especially for cross-browser and adjust the math a bit for different browsers since they tend to change line-heights, padding, etc.

BTW – this is a horrible thing you are doing, as you said, but I’ve been in that situation before so I can relate :-/ Sometimes the “next step in evolution” is still really really far behind the present world. Hope those managers get a clue and instead of spending dollars supporting legacy stuff will consider investing in more modern & flexible techniques. They might be surprised that the real costs involved (increased user productivity, faster dev / enhancement cycles, lower TCO) are actually very close to simply maintaining.