How to detect resolution

[webweaver]

Okay one more question here, hopefully someone will have an answer or two for me on this one.

I want to be able to detect the resolution of the computer that my CD Demo runs on. I have created two demos, one in 1024x768 and one in 800x600. I would like to find a way to detect the resolution when the user puts in the CD (which does have an autostart script) and then direct them to either the 800x600 version or the 1024x768 version.

I have been searching all over for help with this, but coming up empty handed.

Any suggestions?

[paulhiles]

The easiest way is to use client side Javascript to detect the screen resolution and then redirect to the appropriate page. Obviously this will not work if the user has Javascript disabled, in which case a <noscript> tag could be used to alert the user to enable Javascript to view the CD content.

Here are a few examples taken from various sites.

<script language="Javascript">
<!--

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************

if (screen.width <= 640) {
document.location = "640x480.htm";
}

else if (screen.width <= 800) {
document.location = "800x600.htm";
}

else if (screen.width <= 1024) {
document.location = "1024x768.htm";
}

if (screen.width > 1024) {
document.location = "huuuuuuuuge.htm";
}

//-->
</script>

http://www.codebelly.com/javascript/accessbysize.html
http://www.pageresource.com/jscript/jscreen.htm
http://www.zimmertech.com/tutorials_resdetect.html

Hope that helps,

Paul

[webweaver]

Cool thanks a lot!

One other question, I am not good with writing my own javascript code yet, but how difficult would it be to add in there say for the 800x600 resolution that it opens in a window without an address bar at the top?

Is that something that would be easily inserted into that code?

I am having a problem with the 800x600 version not loading quite right when the user has their full tool bar and address bar at the top. It skews the background image and looks bad. When you refresh it's fine, but the initial load of the page messes up the graphic... but with the address bar hidden it loads properly.

It's always these last minute things that are sometimes the biggest hassle! I just want to get this project done and the boss off my tail! LOL

Thanks again Paul!

[paulhiles]

how difficult would it be to add in there say for the 800x600 resolution that it opens in a window without an address bar at the top?

Is that something that would be easily inserted into that code?
I'm not sure whether the Javascript you're using contains the "windows" object.
Javascript can control the attributes of a new window.
Good examples can be seen here (http://www.devshed.com/c/a/JavaScript/Controlling-Browser-Properties-with-JavaScript/1/).

<script language="JavaScript">
// open a new window
window.open("http://localhost", "new", "width=480,height=640,toolbar=no,resizable=no,menub ar=no,location=no,status=no,directories=no");
</script>

The above code should give a window that is sized to the dimensions given and without any address bar, status bar, etc. Not sure whether this a 100% cross-browser.. I recall Mozilla behaving differently to IE.

Paul

[webweaver]

<SCRIPT LANGUAGE="JavaScript">
/*
Made By Aviv Salem, Aviv@innocnet.com
*/

// browser test:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 4 || browserName ==
"Microsoft Internet Explorer" && browserVer >= 4)
version = "1";
else if (browserName == "Netscape" && browserVer >= 3)
version = "2";
else
version = "3";
if (version == "1") {
var correctwidth=1024
var correctheight=768
if (screen.width<correctwidth||screen.height<correctheight)
location="800/intro.htm"
else
location="1024/intro.htm"
}
if (version == "2") {
var toolkit = java.awt.Toolkit.getDefaultToolkit();
var screen_size = toolkit.getScreenSize();
var correctwidth=1024
var correctheight=768
if (screen_size.width<correctwidth||screen_size.height<correctheight)
location="800/intro.htm"
else
location="1024/intro.htm"
}
if (version == "3")
location="800/intro.htm"
</SCRIPT>

Now if when it redirects to the "800/intro.htm" page there must be a variable that can be added to hide the address bar.. but I don't know correct syntax for Javascript.

Well I am sure I will find some way around it.. I don't want to have to spawn a new window, as you can see it redirects from the detection page without the user really even noticing. I like that part... but I don't want to have another page inbetween ..

*sigh*

Thank you SO MUCH for your help though on this Paul... it truly is greatly appreciated!!

[paulhiles]

Hi again Sandy,

I've managed to get a rather messy workaround to your problem. One script was found on the experts-exchange site and the other was from devshed (I think!) If you paste the two scripts into each of your intro pages they will load a window that fills the maximum screen size available, and a new window that fills the screen with no address bar, menu, etc.

<head>
<title>1024 - Intro page</title>
<script language="JavaScript" type="text/javascript">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.avail Height);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight < screen.availHeight||top.window.outerWidth < screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
<!--
var height = 1024 //Set height
var width = 768 //Set width
var name = "winname" //Set window name
var top = 20 //Set distance from top
var left = 20 //Set distance from bottom

if(document.location.search=='') {
newwin=window.open(document.location + "?newwin=true", name, "fullscreen=no,toolbar=no,status=no,menubar=no,scro llbars=no,resizable=no,directories=no,location=no, width=" + width + ",height=" + height + ",left=" + left + ",top=" + top)
}
//-->
</script>
</head>

I'm sure there's a cleaner method for doing this.. I remember a similar appearance was requested a while back.. and I referred the member to chromeless.org but it doesn't sound like you have time to work through all that advanced Javascript/DHTML.

Let me know how you're getting on! :o)

Paul

PS. the above scripts seem to work fine in Internet Explorer, but failed to work in Mozilla Firebird.

[webweaver]

I really appreciate your time and trouble with helping me on this issue. I plugged in the code you prepared for me and while it does get me to where I wanted to be, the only thing that bugs me is the extra window it opens. I had been trying to avoid having another window spawn in order to get the window the way I wanted, but it looks like it could be the only way to accomplish this.

I guess I should have stuck to making everything in one Flash movie that goes full screen so it works on any resolution. *Sigh* I will keep trying, don't know how much more patience the boss is going to give me, but I hate putting out stuff that isn't quite right.

If you have any other suggestions, or anyone else find a solution to this problem I would still be interested.

Thanks again so much for your help and time!

Sandy

[paulhiles]

I had been trying to avoid having another window spawn in order to get the window the way I wanted, but it looks like it could be the only way to accomplish this.
Hi Sandy,
Yeah.. that extra window.. I don't honestly think there's any way to avoid opening it if you're using standard Javascript with HTML. You could use the self close command after the scripts had run.. but it usually shows a prompt message on screen which would defeat the object! I even came across a nifty script that toggles the address bar on and off.. but that also relied on having the window open 'normally' first.. and then you can call the script to remove the address bar.

Like you say.. a complete Flash movie may actually be the cleaner solution! :-(

Paul

[ranjan]

<script language="JavaScript">
<!--
function detectRes() {
window.opener = ''
var res = new Array(800,1024);
var scrWidth = new Array(760,955);
var scrHeight = new Array(420,600);
for(i=0;i<res.length;i++) {
if(screen.Width == res[i]) {
openWindow('abc.htm','myWin','status=yes width='+scrWidth[i]+',height='+scrHeight[i])
}
}
window.close();
}
window.onload=detectRes;

function openWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
//-->
</script>


The opener window should close without confirmation being asked. Tested only in IE 6

Anybody that finds similar script on the web, please spare me unnecessary comments. If its there its there , I can't spend 1/2 hour writing the script and another hour researching if someone has written it earlier.

[paulhiles]

Works a treat in Internet Explorer ranjan.. but Mozilla Firebird didn't want to know unfortunately. :-(
However, the original window closed without so much as a murmur - great stuff!
I changed the screen width and height in this version to ensure the fullscreen effect desired.

<script language="JavaScript" type="text/javascript">
<!--
function detectRes() {
window.opener = ''
var res = new Array(800,1024);
var scrWidth = new Array(800,1024);
var scrHeight = new Array(600,768);
for(i=0;i<res.length;i++) {
if(screen.Width == res[i]) {
openWindow('intro-page.htm','myWin','status=yes width='+scrWidth[i]+',height='+scrHeight[i])
}
}
window.close();
}
window.onload=detectRes;

function openWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
//-->
</script>

Also, I know what you're saying with regards to the origin of any particular Javascript. I mean how many different ways are there to open a new window? but yet people still claim copyright over relatively generic operations. *sigh*

Paul