Kill / stop jquery script

Question

I have a slider and I only want it working when the browsers is under 640px.

So far if the browser is refreshed when the width of the browser is more than 640px, my grid is displayed correctly, if I then make the browser under 640px then the query kicks in and converts the grid to a slider, again this part works fine.

The issue with my code is when you make the browser exceed the 640px again then the query is still running and my grid is still a slider.

Here's the code:

var currentState = false;

function setSize() {

var state = $(window).width() < 640;
if (state != currentState) {
currentState = state;
if (state) {
    window.sliderInit = (function (window, document, undefined) {

        'use strict';

        // Feature Test
        if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {

            // SELECTORS
            var sliders = document.querySelectorAll('[data-slider]');
            var mySwipe = Array;


            // EVENTS, LISTENERS, AND INITS

            // Add class to HTML element to activate conditional CSS
            document.documentElement.className += ' js-slider';

            // Activate all sliders
            Array.prototype.forEach.call(sliders, function (slider, index) {

                // SELECTORS

                var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper
                var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper


                // METHODS

                // Display count of slides
                var createSlideCount = function () {
                    // Variables
                    var slideTotal = mySwipe[index].getNumSlides();
                    var slideCurrent = mySwipe[index].getPos();

                    // Content
                    if ( slideCount !== null ) {
                        slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
                    }
                };

                // Display Slider navigation
                var createNavButtons = function () {
                    if ( slideNav !== null ) {
                        slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
                    }
                };

                // Stop YouTube and Vimeo videos from playing when leaving the slide
                var stopVideo = function () {
                    var currentSlide = mySwipe[index].getPos() - 1;
                    var iframe = slider.querySelector( '[data-index="' + currentSlide + '"] iframe');
                    var video = slider.querySelector( '[data-index="' + currentSlide + '"] video' );
                    if ( iframe !== null ) {
                        var iframeSrc = iframe.src;
                        iframe.src = iframeSrc;
                    }
                    if ( video !== null ) {
                        video.pause();
                    }
                };

                // Handle next button
                var handleNextBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].next();
                };

                // Handle previous button
                var handlePrevBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].prev();
                };

                // Handle keypress
                var handleKeypress = function (event) {
                    if ( event.keyCode == 37 ) {
                        mySwipe[index].prev();
                    }
                    if ( event.keyCode == 39) {
                        mySwipe[index].next();
                    }
                };


                // EVENTS, LISTENERS, AND INITS

                // Activate Slider
                mySwipe[index] = Swipe(slider, {
                    continuous: true,
                    callback: function(index, elem) {
                        createSlideCount(); // Update with new position on slide change
                    }
                });

                // Create slide count and nav
                createSlideCount();
                createNavButtons();
                var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button
                var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button

                // Toggle Previous & Next Buttons
                if ( btnNext ) {
                    btnNext.addEventListener('click', handleNextBtn, false);
                }
                if ( btnPrev ) {
                    btnPrev.addEventListener('click', handlePrevBtn, false);
                }

                // Toggle Left & Right Keypress
                window.addEventListener('keydown', handleKeypress, false);

            });

        }

    })(window, document);



} else {
    $('.swipe-container').removeAttr('id');
    $('.swipe-container').unbind();

}
}
}

setSize();
$(window).on('resize', setSize);

Can you create a jsfiddle please. – deW1 Sep 01 '14 at 09:45 — deW1, Sep 01 '14 at 09:45

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

you have to always listen to window resize event

window.onresize = function(event) {
    setSize();
};

or if you want the event to be fired AFTER the resize is completed JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

edited May 23 '17 at 10:26

Community

1
1

answered Sep 01 '14 at 09:50

AhmadAssaf

3,556
5
31
42

i have added a small edit with link to a code that will execute a function only when the re-size is finished. Is that what you need ? – AhmadAssaf Sep 01 '14 at 14:17
@AhmadAssef , Sorry for the delay not been at my computer. It's not quite what I need, basically the function should return to a grid when the browser is resized above 640px. heres a fiddle i've just made http://jsfiddle.net/xc2cgs6b/ – Dan Sep 01 '14 at 16:05
the JsFiddle was not working properly .. if i open the example when the browser window is already under 640 i still get the grid. I only get the slider when the browser window is big then i minimize, but then when i maximize again i do not get the grid. However, i am not sure about the library you are using for the slider but what you want can be achieved using CSS media queries and not necessarily JS. There exist tons of responsive slider libraries that you can use out of the shelf. – AhmadAssaf Sep 01 '14 at 16:41
You're right, didn't even notice that yet. I've used a few methods to try and do this and this is the closest i've got with a touch feature – Dan Sep 01 '14 at 16:49
I am not on my laptop at the moment but in top of my head try owlcarousel – AhmadAssaf Sep 01 '14 at 16:51
Thanks, I'll give that one a try and let you know – Dan Sep 01 '14 at 16:54
I've played about with the demo and it seems to do what I want built into it, not applied it to a site yet as been busy on another job. I can't seem to get the pagination working as I want using owl 2, I've got the dots but I want numbers, I also want the next and prev next to them as supposed to on top of the fits/numbers, I'll need to get a fiddle up. – Dan Sep 03 '14 at 20:05

Kill / stop jquery script

1 Answers1