Add a breakpoint class to the html element. Useful for targeting stuff in Bootstrap projects.
/*
mqDebug by pepebe
Purpose: Add a class to the html element that fits to the current media Query
To be used with with bootstrap
*/
function mqDebug(){
if(document.getElementById("mq") === null){
console.log('Appending mq debugger to dom');
document.body.innerHTML += '<span id="mq"></div>';
var mq = document.getElementById("mq");
var mediaQueries = ['xs','sm','md','lg'];
for(var i = 0; i < mediaQueries.length; ++i){
var span = document.createElement('span');
span.setAttribute("id", mediaQueries[i]);
span.setAttribute('class', 'visible-' + mediaQueries[i] + '-inline');
mq.appendChild(span);
}
}
var mq = document.getElementById("mq");
var items = mq.getElementsByTagName("span");
/* Check each element if it is displayed or not */
for (var i = 0; i < items.length; ++i) {
if(items[i].offsetParent !== null){
size = items[i].id;
}
}
console.log('Current size: ' + size);
document.documentElement.className = size + ' js';
}
/* debounce by davidwalsh
Delay the resize event my a certain threshhold
https://davidwalsh.name/javascript-debounce-function
*/
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var resize = debounce(function() {
mqDebug();
}, 250);
window.addEventListener('resize', resize);
mqDebug();