Media queries with jQuery
Hi, I'm trying to write something so that it only runs when the window width is larger then 768px. In other words, for mobile devices I don't want the jquery to load. This needs to work when resizing the browser window.
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout
(timer);
timer
= setTimeout(callback, ms);
};
})();
$
(function() {
var pause = 100; // will only process code within delay(function() { ... }) every 100ms.
$
(window).resize(function() {
delay
(function() {
var width = $(window).width();
if( width >= 768 ) {
var carouselOptions = {
auto: true,
btnNext
: "#quicklinks_right",
btnPrev
: "#quicklinks_left",
visible
: 4,
speed
: 1000,
pause
: true,
responsive
: true
};
$
('#quicklinks').jCarouselLite(carouselOptions);
$
("ul.sf-menu").superfish({
animation
: {height:'show'}, // slide-down effect without fade-in
delay
: 800
});
}
else if( width <= 767 ) {
$
('#quicklinks').unbind(); // not sure if this works?
$
("ul.sf-menu").unbind(); // not sure if this works?
}
}, pause );
});
$
(window).resize();
});