Form Widths w/ Field Padding
by beau
HTML
Valid form widths divisible by 3 and 4 for forms between <b id="min">min</b> and <b id="max">max</b> with a <b id="gutter">gutter</b>…
<div id="form-widths"></div>
JavaScript
var formGutter = 14;
var minFormWidth = 340;
var maxFormWidth = 700;
var validWidths = "";
var formWidth = minFormWidth;
function is_int(value) {
return (value % 1 != 0) ? false : true
}
function quarters(width) {
return (width - (formGutter * 3)) / 4;
}
function thirds(width) {
return (width - (formGutter * 2)) / 3;
}
while (formWidth < maxFormWidth) {
if (is_int(quarters(formWidth)) && is_int(thirds(formWidth))) validWidths += formWidth + "<br>";
formWidth++;
}
$("#min").html(minFormWidth + "px");
$("#max").html(maxFormWidth + "px");
$("#gutter").html(formGutter + "px");
$("#form-widths").html(validWidths);