Screen Resolution Detector

This is a cool trick which is best used to make sure that the layout of your screen is kept consistant and clean - by making sure your visiter has the right resolution. An ecample of this is if your page has a title image 600 pixels wide, and the viewers screen resolution is 640 by 40, there will be a horizontal scroll bar on the page (a big no-no). Using this script will allow you to alert the visiter of their resolution, and if it is wrong, alert them to change it. Here is an example script of a resolution detector for less then 1280 by 1024.

Here is the script:

<script language="Javascript1.1">

function detect(){
if(screen.width<1280||screen.height<1024){
alert("This web page is best viewed with a screen resolution of 1280 by 1024 or higher.  Your current resolution is "+screen.width+" by "+screen.height+".  If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution.  Nice Job!")
}

}




</script>

Thats all there is too it. Add this script to your <head> tag. You can change everything in red, to customize it for your page. To load this at start up, add 'onLoad="detect()"' to your <body> tag. If you want to add it to a link or button, add 'onCLick="detect()"'. Good Luck!

Setting a cookie

This code will alert the user every time they visit. By setting a cookie, however, you can make it alert only once, once a week, etc. Therefore I decided to write some code which did this. Thanks to Khalid for the suggestion.

		<script language="Javascript1.1">

function detect(){
if(screen.width<1280||screen.height<1024){
alert("This web page is best viewed with a screen resolution of 
1280 by 1024 or higher. Your current resolution is "+screen.width+" 
by "+screen.height+". If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution. Nice Job!")
}

}


//this part will call up detect if this is the first visit.
//This script and many more are available free online at 
//The JavaScript Source!! http://javascript.internet.com 


var expDays = 1; 
// number of days the cookie should last


function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);

detect();

}
else {
count++;
SetCookie('count', count, exp);

}
}






</script>

Then instead of calling detect(), call checkCount().

Forward to resolution specific page

Instead of forcing the viewer to change their resolution, it might be more user friendly to forward them to a different version of your site that is designed for their lower resolution. Thanks to awilson for this suggestion. To do this simply replace the following code: 

Replace:

function detect(){
if(screen.width<1280||screen.height<1024){
alert("This web page is best viewed with a screen resolution of 
1280 by 1024 or higher. Your current resolution is "+screen.width+" 
by "+screen.height+". If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution. Nice Job!")
}

}


With:


function detect(){
if(screen.width<1280||screen.height<1024){
location.href('highres.html');
}else{
location.href('lowres.html');
}

}

Load it

Make sure that you add this code to your page: 

Replace:

<body>


With:

<body onLoad="detect()">