jquery resize window to fit contents

Question

I have a simple popup window that shows 300x300px picture, I set up the size of the window to be 350x350px, but depending on the browser I either get scroll bars or extra white space. Is there some jQuery function that would resize the browser window just to fit the content without any scroll bars or white space, no matter what browser?

Help me out!!

Answer 1

You could do something like this..

function windowResize() {
   var contentWidth = document.getElementById("YourImageOrContent").offsetWidth;
   var contentHeight = document.getElementById("YourImageOrContent").offsetHeight;
   window.resizeTo(contentWidth,contentHeight);
}

You may have to add 20 pixels or so to the values... But I still maintain my original answer :-D

Answer 2

Part of the problem I've faced with this same issue is that "resizeTo" resizes based on the outside bounds of the window. That really doesn't help when dealing with different browsers, because the address bar size will be different between browsers, and some browsers will honour the "location=no" instruction, and some will not.

The solution that worked for me (which does include some jQuery, sorry, but which you could probably reverse out to implement it however you like) is this:

window.resizeTo(422, $('#my-id').height() + (window.outerHeight - window.innerHeight));

I've tested this on Safari, Firefox and Chrome and it seemed to work for all of those (don't have a Windows installation, so can't comment for IE).