JQuery not getting correct width

Question

I've used this script to get a width and then apply it to the same element:

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height" : slideSize + "px" });
    });                
});

However, for some reason, there are elements that sometimes don't get a matching width and height. As you can see in this fiddle: https://jsfiddle.net/cpfgtuzo/5/ the last element has the correct dimensions, but the rest are all higher than their width. I'm trying to get them all to be square and I need to support old browsers too.

This only seems to be an issue when the size of the window is smaller and the four items stack in into a 2 column.

Answer 1

After your comments on other answer,

I've got numerous elements on the page that use this script and not all are the same size (there are smaller sets of squares too)

And

but the resulting box isn't coming out square. If you inspect your fiddle, the boxes are ~10px too tall

This solution seems to overcome those problems, Let me know if this helps, Working Fiddle

$(document).ready(function () {
    $(".equal-height").each(function () {
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
        //setting the width along with height
    });                
});

Answer 2

Hmm I think there is a bug with jQuery, when it is calculating the width of each element.

Take this jsfiddle as a workaround.

// Height = Width
$(document).ready(function() {
  var width = $('.wide-content').width();
  // prevent jQuery from calculating the width of children
  $('.wide-content').hide();
  // $(".equal-height").width() is now 50
  var slideSize = $(".equal-height").width() * width / 100;

  $(".equal-height").each(function() {
    $(this).css({
      "height": slideSize + "px"
    });
  });
  $('.wide-content').show();
});

Answer 3

Same height on all elements

I'd just use the first box to calculate the height for the other elements - atleast this would ensure the same height. Also it would get rid of that loop..

$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});

One line to rule them all

But, since this did not fit the scope..

Making squares of differently sized elements

After some messing about it's clear that the widths are returned wrong only after you start tampering with the height. This can easily be tested by commenting out the css-command that sets the height and observing the output.

The solution seems to be to set a predefined height:

.link-quarters {            
    width: 25%;
    height: 100px;
    float: left;
    ...

This will return the exact same width on all elements (the important part) and you can then set the corresponding height programtically without issues.

There's still an issue with rounding though, as the percentage-width might result in decimal numbers that gets rounded by the browser (or js).

https://jsfiddle.net/cpfgtuzo/17/