/**
* Created by auipga on 18.08.14.
*/
jQuery(document).ready(function($){
$('head').append('');
$('body').append('
\
\
\
\
BS-Debug | \
width:\
?px\
(-'+getScrollbarWidth()+'px)\
| heigth:\
?px\
| \
\
\
| \
TNTN | \
XXSXXS | \
XSXS | \
SMSM | \
MDMD | \
LGLG | \
\
Min | 0px | ≥384px | ≥480px | ≥768px | ≥992px | ≥1200px |
\
Max | <383px | <479px | <767px | <991px | <1199px | ∞ |
\
Diff | | | | | | |
\
\
');
var ScrollbarWidth = getScrollbarWidth();
$(window).on('resize', function (e) {
var $window = $(window);
var width = $window.width() + ScrollbarWidth;
var height = $window.height();
$('#bsdebug-width').text(width);
$('#bsdebug-height').text(height);
var breakpoints = [0, 384, 480, 768, 992, 1200, 9999];
$('#bsdebug-diff>td').each(function (i) {
var diff = width - breakpoints[i];
if (diff >= 0) {
$("#bsdebug-min td").eq(i).css({ 'background-color':'rgba(127, 219, 124, 0.67)', 'font-weight': 'bold' });
} else {
$("#bsdebug-min td").eq(i).css({ 'background-color':'', 'font-weight': '' });
}
if (breakpoints[i + 1] > width) {
$("#bsdebug-max td").eq(i).css({ 'background-color':'rgba(127, 219, 124, 0.67)', 'font-weight': 'bold' });
} else {
$("#bsdebug-max td").eq(i).css({ 'background-color':'', 'font-weight': '' });
}
if (diff > 0) {
diff = "+" + diff;
}
$(this).text(diff);
});
}).trigger('resize');
});
/*
source: http://stackoverflow.com/a/13382873/816362
*/
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}