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

Question

I have a jQuery script, this sets the width of the element to 50% through the usual CSS width attribute.

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

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

The problem is that outerWidth() reports, for example, 564px , but when I check the Safari inspector, it says 580 . Therefore, the return of this function is incorrect, and I would like to know what is the reason.

Demo:

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

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

The content (the gray area when you click on the red tab) should be hidden when loading through negative margin, but due to the (wrong?) Jquery return, this is not one of these topics (showing slightly).

console.log calls:

  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)); 

Answer 1

.outerWidth([includeMargin]) - returns the width of the element along with left and right indentation, border and (optionally) mark in pixels.

---

Setting the [includeMargin] parameter to true adds fields to this number:

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

---

.width() - returns the pixel value without a unit , not including the left and right padding, border or margin.

According to jQuery docs, the only difference between .width() and .css(width) is that the latter includes units ('px'), where width() just returns a number (without 'PV').

So, if by definition width() does not contain fields, indents and borders, then css(width) cannot

---

I have a jQuery script, this sets the element width to 50% through the normal CSS width attribute.

This parameter sets the element itself (not including margin, padding or borders) to 50% of this container. If the window is a container, the width of the element will be 50% of this.

Example:. With a window width of 1160 pixels, your script will create an element with 50% of 1160 or 580 pixels wide (excluding margins, indents or borders).

If I then print the outerWidth(true) this element to get the exact value of the pixel, sometimes it doesn't match $(window).width()/2 .

When you look at the same element with outerWidth(true) , now you add a marker, padding or borders to the number.

Using my example:. With a window of 1160 pixels, $(window).width()/2 will be 580. Assuming your element also has 580 pixels, .outerWidth(true) will add (or subtract) the fields, add a border and add padding to the element itself so that you did not receive 580 if the fields, padding and border are not equal to zero.

Therefore, naturally, with a different “theme” (using your definition), the element will probably have different additions, borders and fields. I can’t say for sure, since I don’t see any code.

Just use .width() instead of .outerWidth(true) so that everything is consistent across all your themes.

---

EDIT:

In the Safari console, I see a margin on the body that calls what you are describing. Inside your consolidated-screen-2.css , you have a 20x left margin.

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

Since your JavaScript is not dynamically updated, and it is not in jsFiddle, I cannot check it. When I set field 0 to the DOM, I cannot call JS to recount the numbers without reloading the page, which of course wipes my DOM over-ride.

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

An alternative solution would seem to include setting the body marker to zero.

---

EDIT 2:

You constantly say that you report errors, but I have a translucent pixel line utility superimposed on my screen for the next, and everything is checked ...

This page is in a window with a width of 1228 pixels. The ruler confirms this.

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

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

The box is open, and the ruler checks that 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)

Answer 2

width and outerWidth(true) should be two different things. The first does not include registration, border or margin - the second does.

If you want outerWidth be exactly half the width of the window, you will have to explicitly consider these things in:

 var $el = $('#el'); var wid = $(window).width()/2 - parseInt($el.css('padding-left')) - parseInt($el.css('padding-right')) - parseInt($el.css('border-left')) - parseInt($el.css('border-right')) - parseInt($el.css('margin-left')) - parseInt($el.css('margin-right')) // assumes all those things are set using pixels, not em or percent or something $el.width(wid);