I made a jquery function that sets the width of an element so that it fills any extra width left by it's siblings inside it's parent. (basically a flexbox)
I call this function in both $(document).ready() and $(window).resize()
HTML
<body>
<div class='pageCenter'>
<div class='fixedCol'>my fixed col</div>
<div class='flexCol'>my flexible col</div>
<div class='percentCol'>my percent col</div>
</div>
</body>
CSS
.pageCenter {
width: 400px;
max-width: 100%;
margin: 0px auto;
overflow: hidden;
background-color: gray;
}
.fixedCol, .flexCol, .percentCol {
float: left;
}
.fixedCol {
width: 100px;
background-color: green;
}
.flexCol {
background-color: blue;
}
.percentCol {
width: 20%;
background-color: yellow;
}
jquery
// Execute when the document has finished loading
$(document).ready(function () {
flexColumn();
});
// Execute on window resize
$(window).resize(function () {
flexColumn();
});
function flexColumn() {
// with each parent of a .flexCol
$(".flexCol").parent().each(function (index) {
var wrapperWidth = $(this).width(); // find its width
var numFlexCols = $(this).children(".flexCol").size(); // get the number of .flexCol elements that are direct descendants
// get the total width of all non .flexCol elements that are direct descendants and use it to calculate the remaining space
var sum = 0.0;
$(this).children().not(".flexCol").each(function (index1) {
sum += $(this)[0].getBoundingClientRect().width;
});
var freeSpace = wrapperWidth - Math.ceil(sum);
// divide the remaining space evenly among all .flexCol elements that are direct descendants
// the fractional components of this division are given to the first .flexCol element so it may end up being 1px larger than the rest
$(this).children(".flexCol").each(function (index1) {
if (index1 === 0) {
$(this).css("width", Math.ceil(freeSpace / numFlexCols));
} else {
$(this).css("width", Math.floor(freeSpace / numFlexCols));
}
});
});
}
Everything works fine in webkit browsers but in firefox (version 37.0.1) only the call from $(window).resize() works properly. This means that when you load the page in firefox it doesn't automatically resize until you resize the window, then it works just fine. So my question is why is my flexColumn() function not working in only the $(document).ready() call when using firefox.
Here is a jsfiddle of the code: http://jsfiddle.net/metamilo/qjs2an1e/
It actually functions properly in the fiddle in firefox but the same exact code doesn't display properly when run on my local wamp stack. (mabe it's a wamp problem)
I've tried using $(window).onload() instead of $(document).ready() and it doesn't change. No errors are displayed in the console either.
I've spent nearly 8 hours trying to track this down and have gone through hundreds of similar quenstions on here but noting I found has helped. I would greatly appreciate any suggestions you may have, and if you need me to clarify something just ask.
Ok, so I figured out what was wrong. It turns out that my css actually had the .less extension so it was getting parsed by less.js for roughly 16ms which delayed the initial styles past the point where firefox was executing the $(document).ready(). Changing it to .css fixed the problem.
Sorry I didn't catch that when posting my question and code, thanks for all your suggestions.
It's always the dumbest little things that trip me up :/