Solved

Detect browser screen resolution on the fly using AJAX?

Posted on 2006-06-26
9
380 Views
Last Modified: 2008-01-09
Looks like the widescreen monitors will become more and more popular. For a 20" widescreen monitor, the default resolution is 1680 wide. This will affect how the web site look. My pony tail marketing people pointed out that my pages are too wide spread after looking at my 20" monitor.

My site are written in php. I am wondering if it is possible to send the screen resolution back to the server using AJAX before the body of the pages are sent. I have no idea about java script nor understand much about AJAX. I dislike the idea about relocating a page in order to send back the resolution. I will have to accept this if AJAX can not be used for this purpose. I need to consider the end users using non-java browser such as lynx.
0
Comment
Question by:Silent_Dog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 26

Expert Comment

by:DireOrbAnt
ID: 16989892
You could do something like this in the <HEAD></HEAD> block of your HTML page:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
  location.href = 'MyScript.php?Wide=1';
//-->
</SCRIPT>

It's not ideal at all, but much better than a trip back to the server using Ajax. Keep in mind that Ajax uses JavaScript, so JavaScript is required either way.

If at all possible, format your page using CSS and use JavaScript to decide what css file to use like this (again in HEAD block, and instead of the block above):
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
  document.write('<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">');
else
  document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
0
 

Author Comment

by:Silent_Dog
ID: 16989936
I like the idea of switching css file better than AJAX!

I understand AJAX uses java, what I need to do is having the page displayed as full width when the browser does not have javascript support.

Your example switches the css files. I need to give a default css file if the browser does not support javascript. Any idea?
0
 
LVL 26

Accepted Solution

by:
DireOrbAnt earned 500 total points
ID: 16989956
I believe CSS will apply rules in order so this might work fine:

<HEAD>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width < 1600)
  document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
</HEAD>

Then, make sure you override any styles that are wide in Wide.css using the same names in Normal.css. Make sense?

So Wide.css gets applied JavaScript or not, and Normal.css gets applied on top of it if JS is enabled AND width < 1600 (or whatever your max is).

I'm not sure it's the best way though, but worth a try :)
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16991256
<NOSCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width < 1600)
  document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
0
 
LVL 26

Expert Comment

by:DireOrbAnt
ID: 16994297
mplungjan, that won't work. Wide.css will never be applied if they have 1600px and up and JavaScript disabled.

In order to use NOSCRIPT, do this:
<NOSCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
  document.write('<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">');
else
  document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>

Note that I haven't tested NOSCRIPT inside the HEAD tag or if this would work everywhere (or at all).
0
 

Author Comment

by:Silent_Dog
ID: 17014892
Thank you. I confirm the above method works.

I do however have a problem associated with it. This perhaps belongs to another thread, however it is still related to this topic. So any information will be appreciated.

My pages are marked up as "XHTML 1.0 Transitional". Firstly the validator complains about the <noscript> tag. I think I can get away by removing this. Secondly it appears using "document.write" does not seem to be the best thing with XHTML docs despite it works as web pages.

What will be the best practice? Would putting the script into a file solve the whole problem? What I might do is to include an in-line css style for the page width instead of switching the entire css file.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17015743
" it appears using "document.write" does not seem to be the best thing with XHTML docs "
Appears how?
0
 

Author Comment

by:Silent_Dog
ID: 17015889
It works when the pages are sent as text/html, it would fail when it is served as: application/xhtml+xml
Please see
http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17015944
Did anyone actually test that?
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question