Skip to content

Instantly share code, notes, and snippets.

@bresson

bresson/index.html

Created October 8, 2014 04:38
Show Gist options
  • Save bresson/c7e28fcf91abe2cda67e to your computer and use it in GitHub Desktop.
Save bresson/c7e28fcf91abe2cda67e to your computer and use it in GitHub Desktop.
Download ZIP
[add your bin description] // source http://jsbin.com/huwog/21
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.container {
border: 1px solid #CCC;
width: 100%;
/*display: table-row;*/
}
.il {
background: #000;
color: #fff;
/*display: table-cell;*/
float: left;
/* display: inline-block; */
margin-right: 1px;
padding-top: 4px;
padding-bottom: 4px;
}
.txt {
background: #900;
}
.states {
clear: both;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="il">11qwq11</div>
<div class="il">11qw1</div>
<div class="il">1adsfas</div>
<div class="il">1111111</div>
<div class="il">1asdfa</div>
<div class="il">asdfafasf1</div>
<div class="il">asdf1</div>
<div class="il">1</div>
<div class="il">11111</div>
<div class="il">1qsqw</div>
<div class="il">11</div>
<div class="il">1</div>
<div class="il">afasdf1</div>
<div class="il">1111</div>
<div class="il">11</div>
</div>
<div class="states">
<div id="recount"></div>
<div id="totalWidthWithLines"></div>
<div id="totalWorkingWidth"></div>
<div id="totalWidthPerElem"></div>
<div id="singlePadWidth"></div>
<div id="parentWidth"></div>
<div id="diff"></div>
<div id="minWidthElems"></div>
<div id="numOfLines"></div>
<div id="naturalWidth"></div>
<div id="numOfElems"></div>
</div>
<script id="jsbin-javascript">
// get width of parent
// get width of each text element
// add all text elements
// add 16px horz padding + 1px margin per element
// parentWidth - text elements
//
window.addEventListener('load', function() {
$('.il').wrapInner('<span class="txt"></div>');
var w = 0,
n = 0,
_padding = 20,
_margin = 1,
_overall = 0,
_parentWidth = 0,
_diff = 0,
_numOfLines = 1,
_totalWidthWithLines = 0,
_totalWorkingWidth = 0,
_totalWidthPerElem = 0,
_singlePadWidth = 0,
_recountWidthOfOverall = 0;
$('.txt').each(function(index) {
console.log(this);
w += $(this).width();
n += 1;
});
_overall = w + (n * (_padding + _margin));
_parentWidth = $('.il').parent().width();
_diff = _parentWidth - _overall;
$('#naturalWidth').text('real width: ' + w + 'px');
$('#parentWidth').text('parent width: ' + _parentWidth + 'px');
$('#diff').text('diff: ' + _diff);
$('#minWidthElems').text('min width all elements ' + _overall);
$('#numOfElems').text(' num of elems ' + n)
if ( _diff < 1 ) {
// elements main width wider then parent
// find number of lines + 1 for 2nd line
_numOfLines += Math.ceil(Math.abs(_diff / _parentWidth ));
$('#numOfLines').text('number of lines ' + _numOfLines);
// multiply parentWidth * _numOfLines for total width
_totalWidthWithLines = _parentWidth * _numOfLines;
$('#totalWidthWithLines').text('total width ' + _totalWidthWithLines);
// subtract _overall from total width = excess width
_totalWorkingWidth = _totalWidthWithLines - w - 2* (n * _margin);
$('#totalWorkingWidth').text('excess width ' + _totalWorkingWidth);
// divide excess width / total elements = width each elem
_totalWidthPerElem = _totalWorkingWidth / n;
$('#totalWidthPerElem').text('width each elem ' + _totalWidthPerElem);
// single padding width
_singlePadWidth = Math.floor(_totalWidthPerElem * 0.5);
$('#singlePadWidth').text('single padding width ' +_singlePadWidth);
// add amount to left / right padding of each elem
// margin is applied via css to parent
// add default padding to each side
$('.txt').each(function(index) {
$(this).css({'paddingLeft': _singlePadWidth + 'px', 'paddingRight' : _singlePadWidth + 'px'});
});
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
_recountWidthOfOverall += $(this).outerWidth(true);
});
$('#recount').text('recount ' + _recountWidthOfOverall)
} else {
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
$(this).css({'paddingLeft': 20 + 'px', 'paddingRight' : 20 + 'px'});
});
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="il">11qwq11</div>
<div class="il">11qw1</div>
<div class="il">1adsfas</div>
<div class="il">1111111</div>
<div class="il">1asdfa</div>
<div class="il">asdfafasf1</div>
<div class="il">asdf1</div>
<div class="il">1</div>
<div class="il">11111</div>
<div class="il">1qsqw</div>
<div class="il">11</div>
<div class="il">1</div>
<div class="il">afasdf1</div>
<div class="il">1111</div>
<div class="il">11</div>
</div>
<div class="states">
<div id="recount"></div>
<div id="totalWidthWithLines"></div>
<div id="totalWorkingWidth"></div>
<div id="totalWidthPerElem"></div>
<div id="singlePadWidth"></div>
<div id="parentWidth"></div>
<div id="diff"></div>
<div id="minWidthElems"></div>
<div id="numOfLines"></div>
<div id="naturalWidth"></div>
<div id="numOfElems"></div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.container {
border: 1px solid #CCC;
width: 100%;
/*display: table-row;*/
}
.il {
background: #000;
color: #fff;
/*display: table-cell;*/
float: left;
/* display: inline-block; */
margin-right: 1px;
padding-top: 4px;
padding-bottom: 4px;
}
.txt {
background: #900;
}
.states {
clear: both;
position: absolute;
bottom: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// get width of parent
// get width of each text element
// add all text elements
// add 16px horz padding + 1px margin per element
// parentWidth - text elements
//
window.addEventListener('load', function() {
$('.il').wrapInner('<span class="txt"></div>');
var w = 0,
n = 0,
_padding = 20,
_margin = 1,
_overall = 0,
_parentWidth = 0,
_diff = 0,
_numOfLines = 1,
_totalWidthWithLines = 0,
_totalWorkingWidth = 0,
_totalWidthPerElem = 0,
_singlePadWidth = 0,
_recountWidthOfOverall = 0;
$('.txt').each(function(index) {
console.log(this);
w += $(this).width();
n += 1;
});
_overall = w + (n * (_padding + _margin));
_parentWidth = $('.il').parent().width();
_diff = _parentWidth - _overall;
$('#naturalWidth').text('real width: ' + w + 'px');
$('#parentWidth').text('parent width: ' + _parentWidth + 'px');
$('#diff').text('diff: ' + _diff);
$('#minWidthElems').text('min width all elements ' + _overall);
$('#numOfElems').text(' num of elems ' + n)
if ( _diff < 1 ) {
// elements main width wider then parent
// find number of lines + 1 for 2nd line
_numOfLines += Math.ceil(Math.abs(_diff / _parentWidth ));
$('#numOfLines').text('number of lines ' + _numOfLines);
// multiply parentWidth * _numOfLines for total width
_totalWidthWithLines = _parentWidth * _numOfLines;
$('#totalWidthWithLines').text('total width ' + _totalWidthWithLines);
// subtract _overall from total width = excess width
_totalWorkingWidth = _totalWidthWithLines - w - 2* (n * _margin);
$('#totalWorkingWidth').text('excess width ' + _totalWorkingWidth);
// divide excess width / total elements = width each elem
_totalWidthPerElem = _totalWorkingWidth / n;
$('#totalWidthPerElem').text('width each elem ' + _totalWidthPerElem);
// single padding width
_singlePadWidth = Math.floor(_totalWidthPerElem * 0.5);
$('#singlePadWidth').text('single padding width ' +_singlePadWidth);
// add amount to left / right padding of each elem
// margin is applied via css to parent
// add default padding to each side
$('.txt').each(function(index) {
$(this).css({'paddingLeft': _singlePadWidth + 'px', 'paddingRight' : _singlePadWidth + 'px'});
});
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
_recountWidthOfOverall += $(this).outerWidth(true);
});
$('#recount').text('recount ' + _recountWidthOfOverall)
} else {
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
$(this).css({'paddingLeft': 20 + 'px', 'paddingRight' : 20 + 'px'});
});
}
});</script></body>
</html>
Raw
jsbin.huwog.css
.container {
border: 1px solid #CCC;
width: 100%;
/*display: table-row;*/
}
.il {
background: #000;
color: #fff;
/*display: table-cell;*/
float: left;
/* display: inline-block; */
margin-right: 1px;
padding-top: 4px;
padding-bottom: 4px;
}
.txt {
background: #900;
}
.states {
clear: both;
position: absolute;
bottom: 0;
}
Raw
jsbin.huwog.js
// get width of parent
// get width of each text element
// add all text elements
// add 16px horz padding + 1px margin per element
// parentWidth - text elements
//
window.addEventListener('load', function() {
$('.il').wrapInner('<span class="txt"></div>');
var w = 0,
n = 0,
_padding = 20,
_margin = 1,
_overall = 0,
_parentWidth = 0,
_diff = 0,
_numOfLines = 1,
_totalWidthWithLines = 0,
_totalWorkingWidth = 0,
_totalWidthPerElem = 0,
_singlePadWidth = 0,
_recountWidthOfOverall = 0;
$('.txt').each(function(index) {
console.log(this);
w += $(this).width();
n += 1;
});
_overall = w + (n * (_padding + _margin));
_parentWidth = $('.il').parent().width();
_diff = _parentWidth - _overall;
$('#naturalWidth').text('real width: ' + w + 'px');
$('#parentWidth').text('parent width: ' + _parentWidth + 'px');
$('#diff').text('diff: ' + _diff);
$('#minWidthElems').text('min width all elements ' + _overall);
$('#numOfElems').text(' num of elems ' + n)
if ( _diff < 1 ) {
// elements main width wider then parent
// find number of lines + 1 for 2nd line
_numOfLines += Math.ceil(Math.abs(_diff / _parentWidth ));
$('#numOfLines').text('number of lines ' + _numOfLines);
// multiply parentWidth * _numOfLines for total width
_totalWidthWithLines = _parentWidth * _numOfLines;
$('#totalWidthWithLines').text('total width ' + _totalWidthWithLines);
// subtract _overall from total width = excess width
_totalWorkingWidth = _totalWidthWithLines - w - 2* (n * _margin);
$('#totalWorkingWidth').text('excess width ' + _totalWorkingWidth);
// divide excess width / total elements = width each elem
_totalWidthPerElem = _totalWorkingWidth / n;
$('#totalWidthPerElem').text('width each elem ' + _totalWidthPerElem);
// single padding width
_singlePadWidth = Math.floor(_totalWidthPerElem * 0.5);
$('#singlePadWidth').text('single padding width ' +_singlePadWidth);
// add amount to left / right padding of each elem
// margin is applied via css to parent
// add default padding to each side
$('.txt').each(function(index) {
$(this).css({'paddingLeft': _singlePadWidth + 'px', 'paddingRight' : _singlePadWidth + 'px'});
});
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
_recountWidthOfOverall += $(this).outerWidth(true);
});
$('#recount').text('recount ' + _recountWidthOfOverall)
} else {
$('.txt').each(function(index) {
console.log(_recountWidthOfOverall)
$(this).css({'paddingLeft': 20 + 'px', 'paddingRight' : 20 + 'px'});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment