Results 1 to 5 of 5

Thread: Differences between JS innerWidth and CSS width: 80%?

  1. #1
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default Differences between JS innerWidth and CSS width: 80%?

    I'm trying to create a gradient with 3 images that will scale based on browser window width.

    It's simple enough, one image on the left that's the start a 1x1 pixel to stretch to whatever the needed width is and one on the right to end it.

    CSS:
    Code:
    #container {
    width: 80%;
    margin: auto;
    }
    
    #container #gradient {
    width: 100%;
    }
    
    #container #gradient img {
    height: 1px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }
    JS:
    Code:
    function init() {
    if (Math.floor(window.innerWidth * .8) > 263 * 2 + 1) {
    document.getElementById("middle").style.width = Math.floor(window.innerWidth * .8 - (263 * 2)) + "px";
    }
    }
    HTML:
    Code:
    <div id="container">
    <div id="gradient"><img src="gradient1.png"><img src="middle.png" id="middle"><img src="gradient2.png"></div>
    </div>
    The images two cap images are 263x1. It always sends the last image to a new line, I tried tweaking and setting the multiplier to .78 vs .8 caused it to work but that's not accurate so the bigger the resolution the bigger the gap.

    I know my code might be a lil messy :P I wanna make it work before I worry about all that, is it just a discrepancy between the interpreting of innerWidth and CSS width?

    Thanks
    twQ

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Using window.innerWidth is not cross browser. Neither is document.documentElement.clientWidth. But if you are using a valid URL DOCTYPE, its better, supported in at least Firefox and IE. And, window.innerWidth never takes into account if there is a vertical scrollbar. While I believe the other always does.

    There are many subtleties in calculating this dimension. I would use jQuery and go for something like:

    Code:
    $('body').innerWidth();
    or:

    Code:
    $(window).innerWidth();
    Notice these use the jQuery function innerWidth(), not to be confused with the innerWidth property available in some browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    Thanks J. I was under the impression (from past experiences) that innerWidth took into account scroll bars - or it seemed to? Maybe Fx 3.6 does and IE doesn't?

    Either way, I'm trying to figure out what the issue is with this page. I have no scroll bar and a valid doctype.

    Any suggestions on how I can find it without using jquery? I like to build my own code so I can learn.

    Thanks
    twQ

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no window.innerWidth in IE. With a vertical scroll bar (you cannot control whether or not your page has a vertical scroll bar - that is dictated by the height of the client window), in Fx 3.6.3 (similar for all Fx going back to version 2.x and perhaps earlier) this:

    1147 : 1130
    is a typical result of:

    Code:
    alert(window.innerWidth + ' : ' + document.documentElement.clientWidth);
    The exact difference (17px in this case) is a result of the OS/browser chrome for the width of the scroll bar. In some cases it might be +- up to 3px or more.

    What is generally done in a case like this (though I might be misunderstanding the situation) is to not put such a fine point on it. Use a single element with a single background image. This background image grades to an end color and the background color of the element is that same as the end color.

    So for a horizontal gradient, you would have an image that is say - 500px wide that grades from say - yellow to white. The background-position is 0 0, the background-repeat is repeat-y, the background-color is white.

    No javascript required, and generally looks real nice.

    If you want to grade from one color to another color, and then back from it to the original or to yet another color, I would try using left and right floats in a container, or a relative container with absolute positioned elements inside it, one element positioned left:0, the other right:0. The background color of the container could be the middle color, and the two contained elements could have your gradients.

    The width of the nuetral area (background-color of the container) would be whatever is left over. Still no javascript required.
    Last edited by jscheuer1; 06-19-2010 at 10:45 PM. Reason: add more info, later - spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    twQ (06-19-2010)

  6. #5
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    Thanks! Right and left floats, duh. Shoulda thought of that. I was over thinking it. Well, that's kinda of disappointing that the function exists if it's not correct but ah well.

    twQ

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
  •