PDA

View Full Version : resolution detection problems

mp3province
06-28-2006, 05:56 PM
lets say for example, you are in 800 x 600, using IE, and you go to

http://www.chantik.in/theodyssey/index.html (this is a page with javascript on it, and it detects your screen resolution, and according to your screen size, redirects you to the proper page)

it redirects you to the proper url ( http://www.chantik.in/theodyssey/intropage800.html )

but how come this doesnt work in firefox? when i try this in firefox, it redirects you to:

http://www.chantik.in/theodyssey/intropage1280.html , and this is the page for when your resolution is 1280 x 1024

the javascript i am using is listed here:

<script>var width = screen.width;var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6)); if(!(res)) res = 1;if (res=='1') {window.location='http://www.chantik.in/theodyssey/intropage640.html'}if (res=='2') {window.location='http://www.chantik.in/theodyssey/intropage800.html'}if (res=='3') {window.location='http://www.chantik.in/theodyssey/intropage1024.html'}if (res!='1' && res!='2' && res!='3') {window.location='http://www.chantik.in/theodyssey/intropagelarge.html'}</script>

any help greatly appreciated. thanks.
regards,
akshay
Kravvitz
06-29-2006, 02:11 AM
Why have so many versions of the same page?

Read this: The importance of window-width (http://www.collylogic.com/?/comments/the-importance-of-browser-window-width/)
coothead
06-29-2006, 02:45 AM
Hi there mp3province,

the first thing that you should be aware of is, those who have javascript disabled - ( about 10% of users ) - will be presented with a blankpage. :supereek:
So I have made your index.html page equivalent to your intropage800.html' page, for the benefit of those 10%. :agree:
The script will now redirect your users to the alternative pages...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Odyssey | The Deck</title>
<meta http-equiv="Content-Type" content="text/html; charset=" />
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:115px 0 0 0;
background: #333 url(images/back.gif) repeat;
text-align: center;
font: normal 11px/18px verdana,arial,tahoma,sans-serif;
color: #333;
}
a img {
border:0;
}
#wrapper {
width: 430px;
background: #fff url(images/sidebar.gif) repeat-y;
background-position: 0 0;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}
#header {
width: 430px;
background: #000;
background-position: top right;
height:210px;
}
#header a {
display:block;
width:430px;
height:105px;
}
#odyssey {
background:url(images/intropage/introtopbw.png) no-repeat;
text-indent:-9999px;
}
#odyssey:hover {
background:url(images/intropage/introtopsepia.png) no-repeat;
}
#odyssey img {
visibility:hidden;
}
#thedeck {
background:url(images/intropage/introbottombw.png) no-repeat;
}
#thedeck:hover {
background:url(images/intropage/introbottomsepia.png) no-repeat;
}
#thedeck img {
visibility:hidden;
}
-->
</style>

<script type="text/javascript">
<!--

var w=screen.width;
var url='http://www.chantik.in/theodyssey/';

switch(w) {

case 640:
window.location=url+'intropage640.html';
break;

case 1024:
window.location=url+'intropage1024.html';
break;

case 1152:
window.location=url+'intropage1152.html';
break;

case 1280:
window.location=url+'intropage1280.html';
break;

case 1600:
window.location=url+'intropage1600.html';
break;
}

//-->
</script>

</head>
<body>

<div id="wrapper">
<div id="header">
<a href="http://www.chantik.in/theodyssey/index2.html" id="odyssey"><img src="images/intropage/introtopbw.png" width="430" height="105" alt="" /></a>
<a href="http://www.chantik.in/thedeck/index2.html" id="thedeck"><img src="images/intropage/introbottombw.png" width="430" height="105" alt="" /></a>
</div>
</div>

</body>
</html>
mp3province
06-29-2006, 01:19 PM
Why have so many versions of the same page?

Read this: The importance of window-width (http://www.collylogic.com/?/comments/the-importance-of-browser-window-width/)

Kravitz,

I am new to webdesign and html and all that. I originally wanted to have the box, that you see in the link i mentioned above, to be centered (top, bottom and left and right). I was told the easiest way for this to be done was css, but i tried and tried and failed...Thats when I came across this nifty javascipt that enabled me to redirect users according to their screen resolution.

thus, i have made an intro page (i need this splash page because i am making a website for a restaurant and for a nightclub. They are owned by the same company, and they want me to have the intro page with 2 links) for each possible resolution, so that when anyone visits the page, the box will be centered at all times..

I hope you understand my problem.

Regards,
Akshay
mp3province
06-29-2006, 01:44 PM
Hi there mp3province,

the first thing that you should be aware of is, those who have javascript disabled - ( about 10% of users ) - will be presented with a blankpage. :supereek:
So I have made your index.html page equivalent to your intropage800.html' page, for the benefit of those 10%. :agree:
The script will now redirect your users to the alternative pages...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Odyssey | The Deck</title>
<meta http-equiv="Content-Type" content="text/html; charset=" />
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:115px 0 0 0;
background: #333 url(images/back.gif) repeat;
text-align: center;
font: normal 11px/18px verdana,arial,tahoma,sans-serif;
color: #333;
}
a img {
border:0;
}
#wrapper {
width: 430px;
background: #fff url(images/sidebar.gif) repeat-y;
background-position: 0 0;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}
#header {
width: 430px;
background: #000;
background-position: top right;
height:210px;
}
#header a {
display:block;
width:430px;
height:105px;
}
#odyssey {
background:url(images/intropage/introtopbw.png) no-repeat;
text-indent:-9999px;
}
#odyssey:hover {
background:url(images/intropage/introtopsepia.png) no-repeat;
}
#odyssey img {
visibility:hidden;
}
#thedeck {
background:url(images/intropage/introbottombw.png) no-repeat;
}
#thedeck:hover {
background:url(images/intropage/introbottomsepia.png) no-repeat;
}
#thedeck img {
visibility:hidden;
}
-->
</style>

<script type="text/javascript">
<!--

var w=screen.width;
var url='http://www.chantik.in/theodyssey/';

switch(w) {

case 640:
window.location=url+'intropage640.html';
break;

case 1024:
window.location=url+'intropage1024.html';
break;

case 1152:
window.location=url+'intropage1152.html';
break;

case 1280:
window.location=url+'intropage1280.html';
break;

case 1600:
window.location=url+'intropage1600.html';
break;
}

//-->
</script>

</head>
<body>

<div id="wrapper">
<div id="header">
<a href="http://www.chantik.in/theodyssey/index2.html" id="odyssey"><img src="images/intropage/introtopbw.png" width="430" height="105" alt="" /></a>
<a href="http://www.chantik.in/thedeck/index2.html" id="thedeck"><img src="images/intropage/introbottombw.png" width="430" height="105" alt="" /></a>
</div>
</div>

</body>
</html>




Coothead,

Thanks, I didn't really know that people would actually disable javascript. Thanks for getting those 10% of users back.

Also, I was wondering what would happen if someone with screen width other than the ones listed were to visit the site. Lets say someone had a screen width of 1400 or 1920, what woud happen? A blank page? Is there any way of modifying the script so that those who had weird widths could just be redirected to intropage800.html?

Just curious. Once again, appreciate the help.

Kind Regards,
Akshay
coothead
06-29-2006, 02:05 PM
Hi there mp3province,

So basically your new edited script checks to see if java script is enabled or disabled?
If it is disabled, they go to intropage800.html?

No, the code that I have provided - ( the CSS and the body content ) - is equivalent to your intropage800.html.
This means that those who have disabled javascript - (10%) - will have the most common sized page - (800x600) - at their disposal.
The javascript will send your viewers - (90%) - to the other sized pages, according to their screen resolution, or stay where they are
if it is 800x600. This means that you no longer require the intropage800.html file.

I hope that this helps. :agree:
mp3province
06-29-2006, 02:10 PM
Hi there mp3province,


No, the code that I have provided - ( the CSS and the body content ) - is equivalent to your intropage800.html.
This means that those who have disabled javascript - (10%) - will have the most common sized page - (800x600) - at their disposal.
The javascript will send your viewers - (90%) - to the other sized pages, according to their screen resolution, or stay where they are
if it is 800x600. This means that you no longer require the intropage800.html file.

I hope that this helps. :agree:

I get it, thanks mate.

Also, I was wondering what would happen if someone with screen width other than the ones listed were to visit the site. Lets say someone had a screen width of 1400 or 1920, what woud happen? A blank page? Is there any way of modifying the script so that those who had weird widths could just be redirected to intropage800.html?

Just curious. Once again, appreciate the help.

Kind Regards,
Akshay
coothead
06-29-2006, 02:24 PM
Hi there mp3province,

I forgot to answer you second question. :o

Also, I was wondering what would happen if someone with screen width other than the ones listed were to visit the site.
Lets say someone had a screen width of 1400 or 1920, what woud happen? A blank page?

No, they would stay at the index.html page - (now equivalent to the intropage800.html page).
If you wish to send them to other pages, then you would add the variations to the script.
If you have no plans to make extra pages then you could send them to the nearest size.

case 1400:
window.location=url+'intropage1280.html';
break;

case 1920:
window.location=url+'intropage1600.html';
break;
mp3province
06-29-2006, 02:45 PM
Hi there mp3province,

I forgot to answer you second question. :o

No, they would stay at the index.html page - (now equivalent to the intropage800.html page).
If you wish to send them to other pages, then you would add the variations to the script.
If you have no plans to make extra pages then you could send them to the nearest size.

case 1400:
window.location=url+'intropage1280.html';
break;

case 1920:
window.location=url+'intropage1600.html';
break;



Awesome mate. Thanks. Are you a big tennis fan? The wimbledon is going on right now. Watching the Lleyton hewit match as I type.

Regards,
Akshay
coothead
06-29-2006, 02:59 PM
Hi there mp3province,

no problem, you're welcome. :agree:

I am watching Murray versus Benneteau as I type. Four all in the first set. :D
Kravvitz
06-29-2006, 07:47 PM
Why? There is no good reason to make multiple versions of a web page for different screen resolutions. Did you guys not read the article I linked to?

Take a look at these:
Center Page Content Horizontally and Vertically (without <table>s) (http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/)
Center Page Content Horizontally and Vertically (with a <table>) (http://www.dynamicsitesolutions.com/html/center_page_content_horizontally_and_vertically/)

I suggest you read these too:
The Importance of Degrading Gracefully (http://weblog.burningbird.net/archives/2005/03/25/the-importance-of-degrading-gracefully/)
Perpetuating the myths of JavaScript degradation. (http://domscripting.com/blog/display.php/25)