Run code on window resize

Question

I'm trying to run this code when window is resizing, this is my code:

    $(document).ready(function () {
            updateContainer();
            $(window).resize(function() {
                updateContainer();
            });

            $('#slider').lightSlider({
                item:1,
                slideMove:1,
                slideMargin: 30,
                loop: true,
                autoWidth: slideWidth
            });
        });
        function updateContainer() {
            var $winWidth = $(window).width();
            if ($winWidth > 1100) {

                var slideWidth = false;

                /* Toggle navigation
                ======================================================================== */
                $('.menu, .search, .categories').click(function(e) {
                    $(this).toggleClass('active');
                    e.preventDefault();
                });


                /* Back To Top
                ======================================================================== */
                $('#back-top').click(function(e) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 500);
                });

            }

            if ($winWidth > 700) {
                var slideWidth = true;
            }
        }

One error is appearing in console: var slideWidth is not definited.

What am I doing wrong? I have tried several ways of writing this but none of them work...

Answer 1

During the document ready, you haven't defined it here:

$('#slider').lightSlider({
    item:1,
    slideMove:1,
    slideMargin: 30,
    loop: true,
    autoWidth: slideWidth
});

At the above stage it is not defined. Make it accessible in the higher scope:

$(document).ready(function () {
  var slideWidth = false;
  updateContainer();
  $(window).resize(function() {
    updateContainer();
  });

  $('#slider').lightSlider({
    item:1,
    slideMove:1,
    slideMargin: 30,
    loop: true,
    autoWidth: slideWidth
  });
});

Make it with var slideWidth = false; so that it goes into the global scope. And when you execute the updateContainer() it will update the global variable.

And make sure, in your updateContainer(), you are not using var:

function updateContainer() {
    var $winWidth = $(window).width();
    if ($winWidth > 1100) {
        slideWidth = false;
    // Other code
}

Answer 2

your slideWidth variable is defined in a scope not accessible, define and initialize it as false after your ready handler:

$(document).ready(function () {
    var slideWidth = false;

and then remove the var from:

if ($winWidth > 700) {
   slideWidth = true;

}