JQuery / Javascript: Function not calling within document.ready

Question

What I want to do is have a slider where DIVs move left & right. The code looks as follows:

<script type="text/javascript">
var $slider;
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

 $(function() {
    $slider = $('.slidemid');
    $slider.fadeOut();

    // set active classes
    $slider.first().addClass('active');
    $slider.first().fadeIn($transition_time).css('display', 'inline-block');

    // auto scroll 
    setInterval(function () {
      slideright(); }, $transition_time + $time_between_slides );

    $('.slidelefta').click(function() {slideleft(); return false;});
    $('.sliderighta').click(function() {slideright(); return false;});

 });

 function slideright() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($slider.length == $i + 1) $i = -1; // loop to start

  $slider.eq($i + 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i + 1).addClass('active');
}
function slideleft() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($i == 0) $i = $slider.length; // loop to end

  $slider.eq($i - 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i - 1).addClass('active');
}

</script>

The initial fadeOut , fadeIn and addClass (in the document.ready function) get executed just fine.

The calls to slideright() and slideleft() never get executed though.

Answer 1

If you are not getting the any errors on the console, then I think its the issue of javascript scopes. As you are invoking the functions slideright() and sildeleft() inside the functions of anonymous function, but these functions are defined outside the anonymous function within global scope.

Think that anonymous function as a class and you are invoking the function inside the class functions and those function does not belong to that class scope.

Solution(I haven't confirmed the code, the I am pretty sure that should work):

1. Define those functions inside the anonymous function $(function() or

2. Wrap those function in the constructor function or object

   function slide(){ this.slideRight = function(){} this.slideLeft = function(){}

   } //invoke it like this var slider = new Slide(); slider.slideRight//for slideRight slider.slideLeft// for slideLeft

Answer 2

Check out this JSBin where i pasted your code and simplified some of the lines since the invocation of the defined functions was the problem. You can see there, in the console, that
in fact the function is being called from the setInterval. Also, i want to point here that it's better to define your functions inside your scope like the way they are declared on the JSBin demo. Why? Well if you define them outside your scope, in the global scope, a very bad person can execute in the console slideright = function () { evilXSShere; } slideright = function () { evilXSShere; } and voilà, your function was overwritten. Hope it helps.