Normally it would be like this
screen.height
screen.width
*There is a difference using screen with the link given
But this tutorial is more focus on Window size and scrolling
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Creating a popup
http://www.blazonry.com/javascript/windows.php
As for concolusion. I create a popup handle
//Create a popup
function popup( link, senderId)
{
//Get the browser resolution
var width = getBrowserWidth();
var height = getBrowserHeight();
//alert( width + "=" + height + " - " + screen.width + "=" + screen.height);
//Reduce the screen by 20%
width = width * 0.8;
height = height * 0.8;
//Put the popup at the middle of the page
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
//alert(senderId);
popupWindow = window.open( link, "popupWindow", "width="+width+",height="+height+",top="+top+",left="+left+",scrollbars=yes,toolbar=no,location=no,menubar=no,resizable=no,directories=no");
popupWindow.focus();
}
//Change the innerHTML based on the given Id
function changeInnerHTML( elementName, theValue)
{
var theElement = window.opener.document.getElementById(elementName);
theElement.innerHTML = theValue;
}
//Change the value based on the given Id
function changeValue( elementName, theValue)
{
var theElement = window.opener.document.getElementById(elementName);
theElement.value = theValue;
}
//Get the browser width
function getBrowserWidth()
{
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; //Non-IE
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth; //IE 4 compatible
}
return myWidth;
}
//Get the browser height
function getBrowserHeight()
{
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight; //Non-IE
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight; //IE 6+ in 'standards compliant mode'
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight; //IE 4 compatible
}
return myHeight;
}
Found out problem
1. Not really 'at center' if the browser zoom is not 100% (happen on FF as I found it out)
Want to use this code? its free and 'as is'
1 comment:
that's all cool & great js , thank you very much for sharing.
Can you give me favor by sharing this script on my JavaScript library?
Awaiting your response. Thank
Post a Comment