Differences between JS innerWidth and CSS width: 80%?

[twQ]

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:

#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:

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:

<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

[jscheuer1]

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:

$('body').innerWidth();

or:

$(window).innerWidth();

Notice these use the jQuery function innerWidth(), not to be confused with the innerWidth property available in some browsers.

[twQ]

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

[jscheuer1]

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:

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.

[twQ]

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