SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    screen dimension checking code

    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. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While everything Alex said may be true for a Desktop computer mobile phones could benefit from being able to detect the screen resolution.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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.
    Also very true!

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got a link to your site?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The following has been a good reference for me regarding such techniques.
    http://www.alistapart.com/articles/switchymclayout/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So come on guys, is anyone gonna give me a hand here?!

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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

    Code javascript:
    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:

    Code javascript:
    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;
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pmw57 View Post
    var width = screen.width;
    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.

    Code:
    var width = window.innerWidth || 
    document.documentElement.clientWidth ||
    document.body.clientWidth;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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';"


    3. 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?


    4. 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. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by blinm View Post
    Anyway, I implemented both recommendations and the page (http://www.meta.projectmio.com/pop.html) loads, thats the first thing,
    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.

    Quote Originally Posted by blinm View Post
    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?
    The original code used this when a known resolution wasn't found.

    Code javascript:
    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.

    Quote Originally Posted by blinm View Post
    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';"
    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.

    Quote Originally Posted by blinm View Post
    3. 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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by blinm View Post
    4. 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?
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Have a quick look at http://www.alistapart.com/d/switchym...yout_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/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I rejigged my code about and now of course it does not work:

    Code:
    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 = window.innerWidth || 
    document.documentElement.clientWidth ||
    document.body.clientWidth;    switch (width) {
        case 1024:
            popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);
            break;
        case 800:
            popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);
            break;
        case 640:
            popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
            break;
        }
    }

    My first concerns lie with the "case" e.g. "case 640"; does that mean the code from felgall will look for 640px or less, does it even understand it? If so then that should be okay. Now I changed the code so there is no default, there shouldn't have been anyway as the screen has to be one of the sizes and so there is always going to be a correct page.

    I change the "window.location" to "popupCenter" as this made more sense, but nothing is loading now so I think its something just here that's the issue as the dimensions are calculated and all the links work, its just that bit that the code does not understand, just the condition, not the calculations. What do you think?


    @Mittineague: I take your point but I think that ridding all the functions is best for the window, its not a big deal really, only annoying I suppose but my webpage is size specific. No matter what you think, that's the way it is.

    @pmw57: Thanks but that's not what I'm looking for.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When innerWidth is not supported, clientWidth won't give you the same value as the screen resolution.
    Instead of 1024 you will get 1007, but that will change depending on your web browser.

    So, instead of using case, you might be better off with a series of if/else cases so that you can check if the size is within a certain range instead.

    Code javascript:
    if (width > 1024) {
        // use 1280 size
    } else if (width > 800 && width <= 1024) {
        // use 1024 size
    } else if (width > 640 && width <= 800) {
        // use 800 size
    } else if (width <= 640) {
        // use 640 size
    }

    You can even get away with it by leaving out the lessthan condition


    Code javascript:
    if (width > 1024) {
        // use 1280 size
    } else if (width > 800) {
        // use 1024 size
    } else if (width > 640) {
        // use 800 size
    } else {
        // use 640 size
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I like the streamlined approach with the second block of code. I'm confused with your foreword, 1024 to 1007 doesn't make any sense to me, but I'll play along...

    I removed the code from "Felgall", which is what I guess you were hinting to and reverted back to what you had, but with the streamlined approach:

    Code:
    <script>
    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) {	
    			if (width > 800) {
    		    // use 1280 size
    		    http://www.meta.projectmio.com/index.html
    		} else if (width > 640) {
    		    // use 800 size
    		http://www.meta.projectmio.com/800.html
    		} else {
    		    // use 640 size
    		    http://www.meta.projectmio.com/640.html
    		}
    	
        }
    }
    </script>

    I'm sure it works and that I've not implemented it properly, but it does not pop anything up for me here. I've cleared my cache too, so it must be how I've pasted it all together. Should I have kept Fengall's code snippet?

    Thanks again.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by blinm View Post
    I removed the code from "Felgall", which is what I guess you were hinting to and reverted back to what you had, but with the streamlined approach:
    The code that I provided is not intended to be "plug and play"

    Instead, it's purpose is to allow you to easily see the structure that is likely to most effective for your situation. For example:

    Code javascript:
    } else if (width > 640) {
        // use 800 size
    } ...

    Where it says "// use 800 size" is where you would add the code to open the new page at that size, which in this case may be something like:

    Code javascript:
    // use 800 size
    popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);

    You don't need to keep the comment there either, if you think that the code makes the intention clear.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I'm sticking with you code and as I have used the sample from before Fengall's then I assume that the new streamlined snippet will work with it also. I see where I went wrong, but its still not working and I've run through the code in my mind and don't understand why not.


    Code:
    function dimension_test() {
        var width = screen.width;
        switch (width) {	
    			if (width > 800) {
    		        popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);		
    		    } else if (width > 640) {
            		popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);		
            	} else {
            		popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
            	}
    	
        }

    The screen calculation conditions are right, the popup command seems to be something that worked in the past and so I would like to think would work now and so I'm again in the dimly lit position of not knowing where the mistake is.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •