const media = {
queryList: {
mobile: window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
tablet: window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
desktop: window.matchMedia('(min-width: 992px)'),
},
queryIf(func, type) {
if (this.queryList[type].matches) func();
},
query(type, func) {
this.queryIf(func, type);
this.queryList.mobile.addEventListener('change', () => this.queryIf(func, type));
},
};
export default media;import media from '/path';
media.query('mobile', () => document.querySelector('body').style.background = 'red');
media.query('tablet', () => document.querySelector('body').style.background = 'green');document.querySelector('.popup').style.display = 'none';<link rel="preload" href="fonts/ubuntu/ubuntu-v14-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2" as="font" type="font/woff2" crossorigin><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.theme.default.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="OwlCarousel2-2.2.1/dist/owl.carousel.js"></script>
<script>
$(".owl-carousel").owlCarousel();
</script>
</body>
</html>
gradientTable();
$(window).resize(function() {
gradientTable();
});
function gradientTable() {
var tableWidth = $(".table--delivery-method").width();
var windowSize = $(window).width();
var widthGradient = $(".table__gradient").width();
var widthWindowWithoutIndentation = windowSize / 100 * 5;
var primaryPositionGradient = windowSize - widthWindowWithoutIndentation - widthGradient;
$(".table__gradient").css("left", primaryPositionGradient + "px");
$(".table__box").scroll(function() {
if($(this).scrollLeft() >= (tableWidth - windowSize + widthWindowWithoutIndentation)) {
$(".table__gradient").fadeOut();
}
else {
$(".table__gradient").fadeIn();
$(".table__gradient").css("left", primaryPositionGradient + $(this).scrollLeft() + "px");
}
});
}var $html = $('html');
var lockedClass = namespacify('is-locked');
$html.addClass(lockedClass);<html class="remodal-is-locked">overflow: hidden