Saturday, May 22, 2010

Javascript get screen browser size resolution

You might find it everywhere but I just keep this link for my own reference.
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:

Unknown said...

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