Ryan Ryan - 2 months ago 16
Javascript Question

Function not firing correctly

currently I have the JS below. I'm trying to run the

slideout.close();
event with smoothstate
onStart
. My code is below and i'm currently getting an error in the console. Could someone please help me out.

Thanks.



$(document).ready(function() {
slideout();
});

function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});

$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}

$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});




Answer

You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.

One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.

I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).

I can't test the following because I don't have whatever Slideout is, but:

$(document).ready(function() {
  'use strict';

  var slideout;  // variable that is local to the doc ready handler function
                 // and accessible to all code within that handler

  function initSlideout() {    // function renamed
    slideout = new Slideout({  // assign to variable declared above
      'panel': document.getElementById('slideout-content'),
      'menu': document.getElementById('slideout-nav'),
      'padding': 256,
      'tolerance': 70,
      'side': 'right'
    });
  }
  initSlideout();

  $('.mobile-nav__icon').on('click', function() {
    slideout.toggle();
  });

  var options = {
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 860,
      render: function ($container) {
        $container.addClass('is-exiting');
        smoothState.restartCSSAnimations();
        slideout.close();
      }
    },
    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        $container.removeClass('is-exiting');
        $container.html($newContent);
      }
    },
    onAfter: function() {
      initSlideout();
    }
  },
  smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});