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!!

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!!

• javascript
• jquery

4 Answers 4

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

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 ment for IE).

Its probably CSS margin / padding affecting the document.

do:

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

That is a really dirty CSS reset there is tons on the web about CSS resets if you would like a more elegant solution :-)

But this will hopefully give you an insight into the problem..

if you are poping out a browser window (that is what i understood) then on your opening function, you should do something like this:

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('image.jpg', 'newwindow', 'height=350,width=350, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no');
-->
</SCRIPT>

notice the scrollbars=no