Screen dimension checking code

JavaScript
1

I have a small webpage which checks for the dimensions of a screen before loading a website, then loading one (of several) which would fit the screen best. Originally this code was fine, until I decided to mesh with it some code that would open a window to specific dimensions and then some other code to remove scroll bars and menus… now leaving me just the lower option which works properly.

I would like to sort this out so that each page loads as it should, in accordance with the conditions. Presently only the bottom part of the code works:

“if (res!=‘1’ && res!=‘2’ && res!=‘3’) PopupCenter (‘http://www.meta.projectmio.com/800.html’,'MyWindow’,800,531)”

So the window will open at 800x531 and load …/800.html, but the other conditions will not work, unless I c&p them to this lower part of the code. I think I’ve gotten something wrong.

website: www.meta.projectmio.com/pop.html

Thanks.

2

This is a very bad practice to employ, you should make your website fluid rather than fixed for several reasons: The checking of resolution does not in anyway reliably indicate the available size within a website thereby things will often break even with such placements in existence. An example of this would be that while JavaScript can detect the screen resolution, it does not account for whether the window is maximized or a custom size, whether sidebars or toolbars are enabled, the browsers own screen requirements, customizations to the viewport (such as whether users manually edit the viewport size) and the difference between styles (as skinning a machine can affect the size of controls like scrollbars, borders, title-bars, etc). Using detection scripts for screen resolution not only is obtrusive (in the sense that it requires scripting to be enabled - which can’t be counted upon) it generally shows a lack of foresight when accounting for users needs. :slight_smile:

3

While everything Alex said may be true for a Desktop computer mobile phones could benefit from being able to detect the screen resolution.

4

kelchm, but in the case of mobile phones you wouldn’t use JavaScript, CSS3 has handlers for viewport resolution and is becoming ever increasingly supported. :slight_smile:

5

What the code does is load a new window to specific dimensions and stops scrolls and everything else so the window size is fixed according to general sizes. Most people won’t need it but I did it for the following sizes anyway:

640x480!
800x600
and >1024

I just want to know how to get the code to run as expected, the example from the line of code I gave works, but I cannot get the other conditions to work.

Any help with the code please.

6

Also very true! :smiley:

7

I only need the site to work on a desktop computer, they have varying screen/resolution sizes, that’s all.

Any help, apparently my HTML is a bit wonky?

8

Got a link to your site?

9

The screen resolution is irrelevant to how big a space there is to display the web page. The browser viewport is what your page is displayed in - not the screen.

10

Here the page concerned:

www.meta.projectmio.com/pop.html

Wel I need a way to measure the space I can play with, lets put it like that. I just got some code I found to do the job and it seemed to be okay, what do you think?

11

The following has been a good reference for me regarding such techniques.

12

No, no, no, my site isn not to work like that. I’m getting a bit tired of people telling me to change my site, at this stage I am not going to do that, I just need to get the code I have working to load pages with all the whistles turned off, in accordance with some rough calculations on screen resolution aka screen space.

Can anyone help with that. I do appreciate people pointing me in the right direction but that is little use to me right now.

Thanks.

13

So come on guys, is anyone gonna give me a hand here?!

14

I cannot perform any testing right now, but perhaps this can help.

Running the script through a beautifier (to make it easier to read) gives us


function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}

function dimension_test() {
    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') {
        PopupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
    }
    if (res == '2') {
        PopupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);
    }
    if (res == '3') {
        window.location = 'http://www.1024+.com/1024_768.html';
    }
    if (res != '1' && res != '2' && res != '3') {
        PopupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);
    }
}

Then, using jslint.com to help remove issues, I have refactored the script to the following:


function popupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    window.open(pageURL, title, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
}

function dimension_test() {
    var width = screen.width;
    switch (width) {
    case 1024:
        window.location = 'http://www.1024+.com/1024_768.html';
        break;
    case 1152:
        // fall through
    case 800:
        popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);
        break;
    default:
        popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
        break;
    }
}
15

I’d replace that line with one that tests the viewport width instead. The code as it currently is will generate a huge horizontal scrollbar if the browser width is 1024 but the viewport width is only 200.

var width = window.innerWidth || 
document.documentElement.clientWidth ||
document.body.clientWidth;
16

Hi, sorry its taken so long to get back to you both, by the way many thanks for taking the time to help out - I’ve been busy with other ToDo’s enthralled with out British election at the moment.

Anyway, I implemented both recommendations and the page (http://www.meta.projectmio.com/pop.html) loads, thats the first thing, but I’m not sure whats going on with the following:

  1. The newer “jslint.com” code first of all has a default and secondly I don’t see an option for the >1024 page?

  2. I also do not understand why what could be >1024 be “window.location” when the other two are “popupCenter”?

" case 1024:
window.location = ‘http://www.1024+.com/1024_768.html’;"

  1. My browser screen size is 1280x686 and so the >1024 page should load but instead the 640.html page loads, however that’s were I am confused as that seems to be labelled under “default”… should there be a default?

  2. felgall: I implemented your change but there seems to be no change to the code’s behavior and I’m not sure what you mean?

The thing is guys the pages have to load according to what size the screen is as you know, the problem I had before was that I couldn’t load more than one page at a time with all the additions I made. The code seems more respectable now, but I’m no judge, but the problem persists that the same 640.html page loads no matter the screen size.

Thanks again guys!

17

I am glad that you are seeing all of those discrepancies.
The code that I posted is not changed in terms of behaviour from how the original code worked. The code that I posted is only easier to read and understand, by using those tools that I mentioned.

You have been able to understand how the code works now, and due to that you have found that it doesn’t do what you intend to occur. But now that you know what the existing code is doing, you can now make plans for what you actually want it to to instead.

The original code used this when a known resolution wasn’t found.


if (!(res)) res = 1;

so that if a known resolution wasn’t used, it would use the 640 resolution instead.

The cleaned up code has only made it easier for you to see and understand that problem.

Once again, you are now understanding much more clearing what the original code was doing. Now that you understand what was happening, you can now make plans to change things so that what you actually want occurs instead.

That is what the original code was doing. It is up to you to decide what you want to occur, so that the code can then be changed so that it does your bidding.

18

As an example.

My screen size is 1152 x 864.

My browser viewport size is 982 x 729.

If you use the screen size to determine which version of your page to send to my browser then I get the 1024 version since 1152 is greater than 1024 but then I end up with a horizontal scrollbar because my browser can only display pages up to 982 wide as that is how wide the display area is. With the amendment I suggested you’d detect the 982 rather than the 1152 and so send me a version that will fit in the browser.

The only time screen size is relevant in JavaScript is where you are opening a new window and use the screen size to make sure the new window appears in the desired location on the screen. Screen size is irrelevant when it comes to displaying web pages because if I had dual monitors then with a screen width of 1152 I can have the width in the browser set to anything between 200 and 2200.

19

Even with a browser maximized, you still need to take the “chrome” into consideration (Navigation bar, Sidebar, Scrollber, Status bar, etc.) and if you have a pop-up - which is enough in itself to upset some people - without the chrome, you are likely to upset even more.

Just the same, if you can be certain of your user base, you may be able to justify it. Although IMHO you should test for, and use, viewport dimensions NOT screen resolution.

Out of curiousity I ran a test a little over a year ago


Notice that even though a majority were viewing maximized (res - chrome) a significant number were viewing with the width considerably less. Especially the higher resolutions.

20

Have a quick look at http://www.alistapart.com/d/switchymclayout/transition_layout_news.html and resize the window. You will see that the demo page rearranges itself depending on the width of the screen, and does so even when you are in the middle of resizing the page.

This seems to be just what you’re looking for. The details of how to achieve it are at http://www.alistapart.com/articles/switchymclayout/