faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

9 of 13 people (69%) answered Yes
Recently 7 of 10 people (70%) answered Yes


How can I get a page with text positions defined to be correctly displayed at different resolutions?

Apr 5th, 2008 20:44
ha mo, Colin Fraser, Joćo Martins,

I do not have the time or the patience to sit down and fully work this
out in code, however, as a general idea you may want to try something a
little different. 
Obviously, one way to do this is to use different pages. Set up a script
to determine the resolution and direct the browser to the appropriate
page. However, there is a number of issues with this that could make a
mess of what you are trying to do. The underlying assumption would have
to be that the user would always enter your site at the index page, to
be redirected correctly. Nonsense of course, if they get a URL of a page
from someone  who may use a 21inch monitor where they use a 15inch one.
There is another way which is considerably more dynamic. 
Use the same script that determines the monitor resolution, bearing in
mind that you need to determine the browser being used as IE uses
screen.width and Navigator uses window.innerwidth and window.outerwidth.
(Both these in the one script should give a value to a variable which
can be used irrespective of browser type.) Something like :
  if (browser.appName == "Netscape") {
     screenres= screen.outerwidth }
  elseif (browser.appName == "Microsoft Internet Explorer") {
     screenres = screen.width }
  else  {
     screenres= 800;  }  //for a value
At that point where you may want to redirect to another window, don't.
use code that reads something like: 
     switch (screenres) {
       case 600:
            document.write("<link href='600style.css' rel='stylesheet'   
       case 800:
            document.write("<link href='800style.css' rel='stylesheet'   
            document.write("<link href='common.css' rel='stylesheet'   
This can be repeated for as many different resolutions as you think you
may need. 
In your page you can use common names for layers that are controlled and
positioned from the stylesheet, irrespective of the stylesheet actually
used. This is a lot easier and cleaner than using different pages all
time to suit a resolution. It is also less work. It also means that the
dynamic nature of javascripting can be fully utilised.