PDA

View Full Version : Resolution Sniffer, Help!

visual.harmony
11-18-2005, 02:20 AM
Hello,

I am in process of developing my design portfolio (all Flash) and it also uses a pattern background. I can see issues arising from this when it comes to different resolutions and the way it will be viewed, since the .swf has to be positioned absolutely so the pattern on the background will be flush. My main problem is i have little to no experience programming Javascript. I have searched through these forums and found a few but i do not know what to do to edit them so that they can fit my need. What i am trying to do is create one "Enter" link from my splash page, but have the popup show a different page depending on the users screen resolution so my .swf will display centered on every resolution, while maintaining a flush pattern on the background. I have searched through this site and found this script written by Coothead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>browser sniffer</title>

<base href="http://coothead.homestead.com/files/"/>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background-image:url(bodyBg.jpg);
}
#splash {
display:block;
border:5px double #000;
margin:auto;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var w=screen.width;
var h=screen.height;

function sniffer() {
if((w==800)&&(h==600)) {
document.getElementById('splash').src='apple.jpg';
}
else if((w==1024)&&(h==768)) {
document.getElementById('splash').src='banana.jpg';
}
else if((w==1152)&&(h==864)) {
document.getElementById('splash').src='girl.jpg';
}
else if((w==1280)&&(h==768)) {
document.getElementById('splash').src='aaa.jpg';
}
else if((w==1280)&&(h==960)) {
document.getElementById('splash').src='ten_quid.jpg';
}
else if((w==1280)&&(h==1024)) {
document.getElementById('splash').src='dog.jpg';
}
}
onload=sniffer;

//]]>
</script>

</head>
<body>

<div>
<img id="splash" src="apple.jpg" alt=""/>
</div>

</body>
</html>

Can someone help me understand and modify this code to fit my need? I greatly appreciate any help given. Thanks!
konithomimo
11-18-2005, 12:22 PM
onload=sniffer;

that tells the browser that when the page loads run sniffer()

then in sniffer you have:

var w=screen.width;
var h=screen.height;

those are the height and the width of the screen. Next you have a bunch of if statements. I will explain one, which in turn should help you understand the rest.

if((w==800)&&(h==600))

if the screen width is 800 pixels and the screen height is 600 pixels

{
document.getElementById('splash').src='apple.jpg';
}

then load apple.jpg into my image that I gave an ID of 'splash' to.

Next comes all of the else if statements, which just means that if the width and height specified dont match the ones in the statement (800px and 600px above) then go to the next if statement.

basically the browser will go to each statement in order and see if the width and height match. If it does then it loads the image that is specified.
RysChwith
11-18-2005, 01:54 PM
I'd recommend using greater-than and less-than, rather than equals. You'll occasionally encounter users with odd screen resolutions (like Mac users), or simply resolutions you didn't consider.

Rys
visual.harmony
11-18-2005, 03:40 PM
Thanks for the reply Koni.

What you are saying makes sense, but i have a couple questions further from the info you provided.

So what i would do is place this script in the <head> tags of my actual flash page (not the splash). So i would actually only have one link from the splash page? User clicks, new page loads, sniffergets the appropriate page according to their resolution, then appropriate page resizes the window accordingly?

I do have experience with actionscript and i know the two vary slightly but it does help in understand Java to an extent.

So my next question would be this:

How can i rewrite the code to not load an image but to load an .htm document instead?


else if((w==1280)&&(h==1024)) {
document.getElementById('splash').src='dog.jpg';
}

So would it be?

else if((w==1280)&&(h==1024)) {
getURL('1280home.htm');
}

Then on "1280home.htm" there would be a script to resize that window to 1280x1024 with any scrolling, menu, etc. options i want on the page? I am assuming the getURL command would be the same or similar to AS. Would this be right?

Rys: I am on a Mac with dual displays - one is my powerbook 15" so i can get all the "weird" resolutions, my second monitor is a square PC sized monitor so i can grab all those resolutions. The only thing i would be worried about is if the user is on 1280+ like 1600 or something.

Thanks you both for your expertise, it is greatly appreciated.
konithomimo
11-19-2005, 03:21 PM
else if((w==1280)&&(h==1024)) {
window.location = '1280home.htm';
}

or

else if((w==1280)&&(h==1024)) {
window.location.href = '1280home.htm';
}
visual.harmony
11-19-2005, 03:42 PM
Thanks a lot Koni, as soon as i get home later tonight i will check this out and let you know how it went.