Below I have demonstrations on three common issues when it comes to displaying a window. All related to exactly what size and where the browser window is located. I could have went into detail about applying this concept to window.open but did not(another issue). Besides, do you want to rewrite your window.open code you have already done? Probably not. All code could be reduced a little further but would be more difficult to explain. All code works on either version 4.0+ browser.
Copy and paste the code you want to any page. It is best to add it in the HEAD section of the page. This ensures the window is resized before anything is actually displayed eliminating requirement to redraw. All these demos have to redraw when they resize since the page is already displayed.
Full screen Window
There are several ways to make the browser window open automatically in full screen. Full screen simply means to display window using all available space on the clients screen. I am only going to show you one. It is simple and works.
<script LANGUAGE="JavaScript1.2"> <!-- window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); // --> </script> My site previously used this code. Click here to try this code.
The first line...window.moveTo(0,0);... moves the window to the top left. This is important to ensure the window actually fits the screen.
The second line...window.resizeTo(screen.availWidth,screen.availHeight);...is pretty readable. Uses built in functions to resize the window to the screens available width and height.Restricted Size Window
Lets take the Full screen example a little further. Lets say you would like the window to be 800x600 in size if the client has the ability to display that size. If the client has less screen area(like 640x480) open the window full screen. If they have more only open the window at 800x600. Here is a simple way to do it.
<script LANGUAGE="JavaScript1.2"> <!-- window.moveTo(0,0); thewidth = (screen.availWidth > 800 ? 800:screen.availWidth) theheight = (screen.availHeight > 600 ? 600:screen.availHeight) window.resizeTo(thewidth,theheight); // --> </script> In above example I used condition expression instead of if...else. reduces code by 2 lines.
Center Window
A final thing you will want to do is center a window. Lets say you have a popup window that is 400x300. Wouldn't it be nice to always have it popup in the middle of the screen. Perfectly centered. Well here is the code to do it.
<script LANGUAGE="JavaScript1.2"> <!-- if (document.layers) { theleft = (screen.availWidth - window.outerWidth) / 2; thetop = (screen.availHeight - window.outerHeight) / 2; } else { theleft = (screen.availWidth - document.body.clientWidth) / 2; thetop = (screen.availHeight - document.body.clientHeight) / 2; } window.moveTo(theleft,thetop); // --> </script> Click here to try this code. This window will be resized to 400x300 automatically for demo.
This requires special code for each browser. It does NOT work in NN6. The first set is for Netscape otherwise it is Microsoft. It is not perfect but I have not been able to find a better reference than document.body.clientWidth for IE. This is one time that Netscape does something easier. Wow!