CODEWITHSUNDEEP
jquery
Mona Coder
Mona Coder

Reputation: 6316

Not Able to Configure How to Use Function in Custom jQuery Plugin

I am trying two write a jquery plugin to track box entering into view and I couldn't figure out how to pass UI value to my plugin and how to use the topIn() inside the plugin.

Basically this plugin is mean to create a null callback function boxTopIn which is re-usable on the client side

(function($) {
  $.fn.boxInView = function(options) {
    var settings = {
      boxTopIn: null
    };

    var options = $.extend(settings, options);

    function topIn(elem) {
      $(window).scroll(function() {
        var screenBot = $(window).height();
        if (($(window).scrollTop() + screenBot) > elemTop) {
          if ($.isFunction(options.onComplete)) {
            options.onComplete.call();
          }
          options.boxTopIn.call();
        }
      });
    }
  };
})(jQuery);

$('#c').boxInView({
  boxTopIn: function() {
    console.log('Box in View');
  }
});

Upvotes: 0

Views: 25

Answers (1)

Daniel Batalla
Daniel Batalla

Reputation: 1264

You never call topIn function inside $.fn.boxInView. Try to add this line after define topIn function:

topIn(this);

The value of this in that point will be $('#c'), so that should work.

Upvotes: 1

Related Questions