I'm working my way through Learning jQuery 4th Edition (PacktPub publishing), trying out one of it's exercises where i have to create new plugin methods called .slideFadeIn() and .slideFadeOut(),bining the opacity animations of .fadeIn() and .fadeOut() with the height animations of .slideDown() and .slideUp().

This is my current code

(function($) {
  $.fn.slides={
    slideIn:function(){
      $(this).fadeIn().slideDown();
    },
    slideOut:function(){
      $(this).fadeOut().slideUp();
    }
  }
})(jQuery);

$('h1').click(function(){
  $(this).slides.slideOut();
});

yet when i click on <h1>, i get the error message,

Uncaught TypeError: Cannot read property 'defaultView' of undefined

I've also tried

(function($) {
  var elem=$(this);
  $.fn.slides={
    slideIn:function(){
      elem.fadeIn().slideDown();
    },
    slideOut:function(){
      elem.fadeOut().slideUp();
    }
  }
})(jQuery);

to see if the error was because $(this) was referring to a different context, but i am still getting the same error

Uncaught TypeError: Cannot read property 'defaultView' of undefined 

EDIT:I've tried editing the code to

$('h1').fadeOut().slideUp();

and it works, so the issue lies with $(this), i just don't see what exactly is the problem with $(this)

Could someone kindly point out my mistake?

Thanks!

I'm working my way through Learning jQuery 4th Edition (PacktPub publishing), trying out one of it's exercises where i have to create new plugin methods called .slideFadeIn() and .slideFadeOut(),bining the opacity animations of .fadeIn() and .fadeOut() with the height animations of .slideDown() and .slideUp().

This is my current code

(function($) {
  $.fn.slides={
    slideIn:function(){
      $(this).fadeIn().slideDown();
    },
    slideOut:function(){
      $(this).fadeOut().slideUp();
    }
  }
})(jQuery);

$('h1').click(function(){
  $(this).slides.slideOut();
});

yet when i click on <h1>, i get the error message,

Uncaught TypeError: Cannot read property 'defaultView' of undefined

I've also tried

(function($) {
  var elem=$(this);
  $.fn.slides={
    slideIn:function(){
      elem.fadeIn().slideDown();
    },
    slideOut:function(){
      elem.fadeOut().slideUp();
    }
  }
})(jQuery);

to see if the error was because $(this) was referring to a different context, but i am still getting the same error

Uncaught TypeError: Cannot read property 'defaultView' of undefined 

EDIT:I've tried editing the code to

$('h1').fadeOut().slideUp();

and it works, so the issue lies with $(this), i just don't see what exactly is the problem with $(this)

Could someone kindly point out my mistake?

Thanks!

• javascript
• jquery

• It really looks like this === $.fn.slides in the functions slideIn and slideOut, try with just console.log(this) and see what it tells you. Reasoning: method bar in foo.bar will have this === foo when invoked as foo.bar() – Paul S. Commented Apr 18, 2014 at 1:49
• Hi Paul, THanks for replying, i've tried console.log(this), and it logs to the console, the h1 element. I.e <h1>Title</h1>, it returns Object {slideIn: function, slideOut: function} when i put console.log(this) in the function instead of the click handler. – Kenneth .J Commented Apr 18, 2014 at 1:51
• When I tried, $.fn.foo = {bar: function () {console.log(this);}}; $(document.body).foo.bar(); // Object {bar: function} – Paul S. Commented Apr 18, 2014 at 1:56

1 Answer 1

The way you are creating your plugin is a little different than I would, as the "this" is the "fn.slides" scope 'this' - thus, it errors out. I was able to solve your issue by passing the context of the "this" you want -- which is the 'h1' by using 'call'. With "call" (and "apply), I can call the function and pass in the 'this' context I want.

(function($) {
  $.fn.slides={
    slideIn:function(){
      $(this).fadeIn().slideDown();
    },
    slideOut:function(){
      $(this).fadeOut().slideUp();
    }
  }
})(jQuery);

$('h1').click(function(){
  $(this).slides.slideOut.call(this);
});