Showing posts with label Screen heinght. Show all posts
Showing posts with label Screen heinght. Show all posts

Wednesday, June 11, 2008

Resize and position Javascript popup

In many of my project i came across the situation where i had to open a popup with a particular size and position the popup in the middle of the window. I was sending the height and width parameter in the window.open() funtion parameter. But many times i had to add some extra controls in that page which needs the increase of the popup size. I was problemetic for me to goback to the parent page and find the javascript which is opening the popup and change.
So i decided to control the size from the popup itself. And i used
window.resizeTo(width,height) function for that purpose and called it on body onLoad event.
But what about positioning the popup?
For both the pubpose to solve i wrote a function resizeAndPositionWindow() which takes height and width as parameter and positions the popup in the middle of the window. Below is the function...
function resizeandPositionWindow(width,height)
{
window.resizeTo(width,height);
var scrW = 1024, scrH = 768;
var popW=width,popH=height;
if (document.all document.layers) {
scrW = screen.availWidth;
scrH = screen.availHeight;
}
else
{
try
{
scrW = window.screen.availWidth;
scrH = screen.availHeight;
}
catch(e){}
}
if(document.all)
{
popW=document.body.clientWidth;
}
else
{
if(document.layers)
{
popW=window.innerWidth;
popH=window.innerHeight;
}
else
{
try
{
popW=window.innerWidth;
popH=window.innerHeight;
}
catch(e){alert('Exception');}
}
}
var x,y;
x=(scrW-popW)/2-13;
y=(scrH-popH)/2;
window.moveTo(x,y);
}

By default it is assumed that the screen resolution of the user is 1024X768. Then it determines the actual height.
I used the above funtion to make a function which will take a int parameter as gap between the popup and computer screen and will make the popup which will have that length in top,bottom,left and right.
function resizeAccordingToScreenSize(gap)
{
var scrW = 1024, scrH = 768;
if (document.all document.layers) {
scrW = screen.availWidth;
scrH = screen.availHeight;
}
else
{
try
{
scrW = window.screen.availWidth;
scrH = screen.availHeight;
}
catch(e){}
}
var gapPx=0;
try
{
gapPx=parseInt(gap)*2;
}
catch(e){alert("Wrong value for gap.")}
resizeAndPositionWindow(scrW-gapPx,scrH-gapPx);
}