SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resizing Browser Window - Did it work?

    Hi-
    I've got a basic question on using JavaScript and/or jQuery to resize browser windows.

    I tried using two different scripts, but when I tested them in my iPhone, they both looked the same to me. Essentially the difference between the two is that in Script #2 I've added the following:
    Code:
    window.onload = function () {
        adjustStyle();
    };
    Is there something obvious that I'm missing here? Thanks,


    Script #1
    Code:
    function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 600) {
            document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "_css/main.css");
        }
    }
    
    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };
    Script #2
    Code:
    function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 600) {
            document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "_css/main.css");
        }
    }
    
    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };
    window.onload = function () {
        adjustStyle();
    };

  2. #2
    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)
    Is there some particular reason why you want to test the viewport size in JavaScript rather than using a CSS media query?
    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="^$">

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, not really. I'm new to this and am not aware of the differences between the two. I just started reading a piece by Ethan Marcotee in A List Apart on CSS media queries, but I'm not very confident in my understanding of it. How would I do the resize with CSS media query? Thanks


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
  •