Tuesday, January 11, 2011

JavaScript get Browser height and width and Set into Div

This Article will help for following

1) how To get all Browser Height and Width
2) Dynamically change the div height and width based on browser height and width
3) get the Browser Name

Sample Javascript File
=======================

function() {

var frame = document.getElementById("main");
var htmlheight = document.body.parentNode.scrollHeight;
var windowheight = window.innerHeight;

if (whichBrs() == "Internet Explorer") {
if (htmlheight < windowheight)
{ frame.style.height = windowheight - 150 + "px"; }
else { frame.style.height = htmlheight - 150 + "px"; }

}
else {

if (htmlheight < windowheight) {
frame.style.height = windowheight - 150 + "px";


}
else {
frame.style.height = htmlheight - 150 + "px";

}

}

}




function whichBrs() {
var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0, agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0, agt.indexOf('\/'));
}
else return 'Netscape';
} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0, agt.indexOf(' '));
else return navigator.userAgent;
}