using unbind in jquery media queries

[erme]

Hi, I only want a bit of javascruipt to run when window width is larger then 768px. In other words, for mobile devices I dont want it 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();

});

Edited February 15, 2013 by erme