Disable Jquery plugin/function on the fly

Question

So I have a slideshow in the website, that I want to turn to just a list when the window size is mobile. I was thinking if there is a way to disable the jquery plugin or the functions on window resize to disable the sliding and create mobile styles for the slide list.

What do you think is the best way to do this?

Thanks!

Many jQuery widgets have a `destroy()` method that will do this. — Barmar, Apr 23 '13 at 04:37
Or just check the window size before starting the widget. A connection can't go from desktop to mobile. — Barmar, Apr 23 '13 at 04:39
@Barmar, Looks like the second option might be a better solution — KT., Apr 23 '13 at 06:15

score 1 · Answer 1 · answered Apr 23 '13 at 15:10

Use a slideshow with a teardown() or destroy() method that is able to remove any elements and event listeners it created.

Any jQuery plugin using the jQuery UI widget factory will have this but unfortunately many others do not. You could try this carousel https://github.com/richardscarrott/jquery-ui-carousel, just be sure to include jQuery widget factory: http://jqueryui.com/widget/

Secondly do not attempt to sniff whether or not the device is mobile, don't be stuck thinking in terms of devices. What if the user wants to view the carousel on their phone? What if their device is wrongly interpreted to be mobile? Making assumptions may come back to bite you. Detecting features and properties is safer and should be more future-friendly.

Think about the problem you are trying to solve, if it is "this slideshow would work better if presented as a list on small viewports" then go ahead and check the size of the window or test a media query with matchMedia()before instantiating the plugin (why do all the work just to undo it again) and again if the viewport resizes or device orientation changes.

In plain JS (and for a relatively up-to-date browser) that might be something like:

var slideshowControl = function(element, breakpoint) {

    var api;

    var initSlideshow = function() {
        api = new Slideshow(element);
    };

    var removeSlideshow = function() {
        api.teardown();
        api = undefined;
    };

    // Test media query
    return function() {

        // Test if match media is available
        var matchMedia = window.matchMedia || window.msMatchMedia;

        if ( ! matchMedia) {
            return;
        }

        if (matchMedia('all and (max-width:' + breakpoint + ')').matches && ! api) {
            return initSlideshow();
        }

        if (matchMedia('all and (min-width:' + breakpoint + ')').matches && api) {
            return removeSlideshow();
        }
    };

}(document.querySelector('.slideshow'), 640);

window.addEventListener('resize', slideshowControl);
window.addEventListener('DOMContentLoaded', slideshowControl);

score 0 · Answer 2 · answered Apr 23 '13 at 04:44

0

Check the window size before calling the plugin. For instance:

height = $(window).height();
width = $(window).width();
if(height > 300 || width > 200) {
  // Initialize plugin
}

Or, if you want to start it and then stop it when the window gets too small (assuming the plugin will have a way to disable itself):

$(window).resize(function() {
  height = $(window).height();
  width = $(window).width();
  if(height < 300 || width < 200) {
    // Stop plugin
  }
});

answered Apr 23 '13 at 04:44

Nick Bernhard

106
4

Thanks! But the thing is i dont know how to stop the plugin. The plugin generates a bunch of divs from just a list of images i created. (for the captions, slide nav etc) but i just want to keep it simple when it reaches the mobile size. Any ideas? – KT. Apr 23 '13 at 06:13
I think the first snippet of code would work well for your purposes. Decide how small you want the minimum size to use the plugin to be and put those numbers in. That will prevent the plugin from starting in the first place. – Nick Bernhard Apr 23 '13 at 17:25

score -1 · Answer 3 · answered Apr 23 '13 at 04:39

-1

check if the request comes from $_SERVER['HTTP_USER_AGENT'] and check if the user_agent is mobile browser or use a plugin to do this part.

http://detectmobilebrowsers.com/

If the request came from mobile then. redirect to your mobile page.

answered Apr 23 '13 at 04:39

Lalith B

11,843
6
29
47

Thanks! I'm not exactly into creating a website for mobile. But maybe I'll try to do this with my mobile css. – KT. Apr 23 '13 at 06:14

Disable Jquery plugin/function on the fly

3 Answers3