$(element).outerWidth(true) reports differently based on theme?

Question

I have a jQuery script, this sets an element's width to 50% via the normal CSS width attribute.

If I then output the outerWidth(true) of that element to get the exact pixel value, it sometimes does not correspond to $(window).width()/2 - this is based on the theme that the site has. Unfortunately I cannot bring a demo for this behavior online.

Is there any specific CSS attribute that might cause such a difference?

The problem is that the outerWidth() is reporting for example, 564px, but when I check in Safari inspector, it says 580. So the return of that function is incorrect and I'd like to be able to know what is the cause.

Demo:

http://users.telenet.be/prullen/this/

http://users.telenet.be/prullen/that/

The content (gray area when you click on the red tab) is supposed to be hidden on load via a negative margin, but due to the (incorrect?) return of jquery, it is not in one of these themes (showing slightly).

console.log calls are :

        console.log('window width / 2 = ' + $(window).width()/2);
        console.log('doc width /2  = ' + $(document).width()/2);

        console.log('width = ' + defaults.boxWidth);
        console.log('width = ' + $slider.css('width'));
        console.log('width = ' + $slider.width());
        console.log('width = ' + $slider.outerWidth());
        console.log('width = ' + $slider.outerWidth(true));

Solution

.outerWidth([includeMargin]) - Returns the width of the element, along with left and right padding, border, and (optionally) margin in pixels.

---

Setting the [includeMargin] option to true adds the margins to this number:

.outerWidth(true) - Returns the width of the element, along with left and right padding, border, and margin, in pixels.

---

.width() - Returns a unit-less pixel value not including left and right padding, border, or margin.

As per jQuery docs, the only difference between .width() and .css(width) is that the latter includes the units ('px') where width() simply returns the number (without the 'px').

So if, by definition, width() does not include margins, padding, and borders, then neither can css(width)

---

I have a jQuery script, this sets an element's width to 50% via the normal CSS width attribute.

This is setting the element itself (not including margin, padding or borders) to 50% of it's container. If the window is the container, then the element's width will be 50% of that.

Example: With a window of 1160 pixels wide, your script will create an element at 50% of 1160, or 580 pixels wide (not including margin, padding or borders).

If I then output the outerWidth(true) of that element to get the exact pixel value, it sometimes does not correspond to $(window).width()/2.

When you look at the same element with outerWidth(true), now you're adding margin, padding or borders to the number.

Using my same example: With a window of 1160 pixels, $(window).width()/2 will be 580. Assuming your element is also 580 pixels, .outerWidth(true) will add (or subtract) margins, add border and add padding to the element itself so you are not going to get 580 unless margins, padding and border are all zero.

So naturally, with a different "theme" (using your definition), the element is probably going to have a different padding, border and margins. I cannot say for sure since I cannot see any of your code.

Simply use .width() in place of .outerWidth(true) to keep things consistent across all of your themes.

---

EDIT:

In the Safari console, I'm seeing a margin on the body causing what you describe. Inside your consolidated-screen-2.css sheet you have a 20 pixel left margin.

You must take this body margin into account when you do your calculations.

Since your JavaScript does not dynamically update and this is not in a jsFiddle, I cannot test it any further. When I set the margin to 0 in the DOM, I cannot invoke the JS to recalculate the numbers without reloading the page, which of course, wipes out my DOM over-ride.

One solution would be to stick with .width() (ignore margins) in all your calculations.

An alternate solution would seem to include setting the body margin to zero.

---

EDIT 2:

You keep saying it's reporting incorrectly, but I have a semi-opaque pixel ruler utility overlaid on my screen for the following and everything is checking out...

This page in a 1228 pixel wide window. Ruler verifies this.

console.log('width = ' + $slider.outerWidth(true)); = 1188

1188 plus 40 pixels (body left/right margins) = 1228 (same as ruler)

Drawer is open and ruler verifies it is exactly 614 pixels wide (without the right border).

console.log('width = ' + $slider.css('width')); = 594 px;

594 plus 20 pixels (body left margin) = 614 (same as ruler)

console.log('width = ' + $slider.width()); = 594

594 plus 20 pixels (body left margin) = 614 (same as ruler)