#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    15
    Rep Power
    0

    Detecting window size


    I'm beginning to think browsers just don't like me.

    I'm trying to detect the width of my browser window, and so far I've come up with 5 different ways. Got it working in Firefox, it's working on my friend's laptop using IE10 (gives a slightly erroneous answer, but works), but try as I might, it won't work on my laptop using IE8.

    I've tried:

    window.innerWidth
    document.documentElement.clientWidth
    document.body.clientWidth
    document.body.offsetWidth
    and
    document.documentElement.offsetWidth

    I'm about to give up and move on, and just hope that 99% of the people who see this page won't have screwy problems like I do and will see the page the way it should be, but I thought I'd come here and see if anyone has yet one more solution to try...

    Here's the code I'm testing it with:

    Code:
    var winW, winH;
    if (window.innerWidth && window.innerHeight) {
     winW = window.innerWidth;
     winH = window.innerHeight;
    }
    else if (document.body && document.body.offsetWidth) {
     winW = document.body.offsetWidth;
     winH = document.body.offsetHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
     winW = document.documentElement.clientWidth;
     winH = document.documentElement.clientHeight;
    }
    else if (document.body && document.body.clientWidth) {
     winW = document.body.clientWidth;
     winH = document.body.clientHeight;
    }
    else if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
     winW = document.documentElement.offsetWidth;
     winH = document.documentElement.offsetHeight;
    }
    
    
    document.writeln('Window width = '+winW);
    document.writeln('Window height = '+winH);
    I'm going to make the winW and winH variables equal to screen.width and screen.height when I define them, so at least if none of the IF statements work, it will return the screen dimensions and work somewhat...
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    What's the end purpose for you obtaining the screen dimensions? Because, the way it sounds:
    Originally Posted by cjreynolds
    I'm about to give up and move on, and just hope that 99% of the people who see this page won't have screwy problems like I do and will see the page the way it should be
    Because, if you are using valid CSS; it should not matter what browser or screen size the end user is viewing your page(s) from; the elements should appear the exact same. Unless you are going for a workaround for older browser, that do not support CSS3 Media Queries.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    15
    Rep Power
    0
    I just plugged the code into the webpage I'm working on, and it freekin' worked! Go figure....
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    15
    Rep Power
    0
    What's the end purpose for you obtaining the screen dimensions? Because, the way it sounds:

    Originally Posted by cjreynolds
    I'm about to give up and move on, and just hope that 99% of the people who see this page won't have screwy problems like I do and will see the page the way it should be
    Because, if you are using valid CSS; it should not matter what browser or screen size the end user is viewing your page(s) from; the elements should appear the exact same. Unless you are going for a workaround for older browser, that do not support CSS3 Media Queries.
    Actually, my expertise in CSS is one problem - it's been several years since I've been a developer, and I was somewhat inexperienced back then - I'm not much better now - this may only be the second time I've noticed that there is a CSS3 (there's not an 'embarrassed' smiley, or I'd use one here).

    However, one of the reasons I was needing this is that I need to swap certain images on the page when the page size changes, so I guess it's not a total waste of time...

    But as for CSS3, I guess it's time to put on the learning cap and update my skills a bit.. w3schools would be my first resource for that, I suppose - You know any other good resources for learning CSS3?
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Originally Posted by cjreynolds
    Actually, my expertise in CSS is one problem - it's been several years since I've been a developer, and I was somewhat inexperienced back then - I'm not much better now
    Yeah, it would be a good idea to get better equipped with CSS; for your element layouts. JavaScript really should not be used to set-up your layout (unless..., as I reference before; if your trying make some of your CSS cross browser compatible).

    Originally Posted by cjreynolds
    However, one of the reasons I was needing this is that I need to swap certain images on the page when the page size changes, so I guess it's not a total waste of time...
    You can do this with CSS3 Media Queries.

    Originally Posted by cjreynolds
    I guess it's time to put on the learning cap and update my skills a bit
    Originally Posted by cjreynolds
    You know any other good resources for learning CSS3?
    Here is a good place to start: Learn CSS | MDN.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    15
    Rep Power
    0
    Thanks! Off to school, now...

IMN logo majestic logo threadwatch logo seochat tools logo