jQuery unbinding a plugin event

Question

I've never needed to 'bind' or 'unbind' anything before so I'm getting confused because I can't find an example that directly relates to what I want to do.

There is a plugin that scrolls a div when you get to a certain point at a page here - you've all seen this kind of thing, right?

But I only want the plugin to fire when the window is a certain width, and then 'unfire' / unbind if the window is below that width again e.g....

(by the way #contact-form is the container I'm scrolling which contains, you guessed it, a contact form)

function contactForm() {
    windowWidth = $(window).width();
    if (windowWidth >= 1024) {
        jQuery('#contact-form').containedStickyScroll();
    } else {
        jQuery('#contact-form').unbind(); // I don't want the plugin to fire
    }
};    


// Standard stuff...

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

$(window).resize(function() {   
    contactForm();
});

This contained sticky scroll function looks like this:

  $.fn.containedStickyScroll = function( options ) {

    var defaults = {  
        oSelector : this.selector,
        unstick : true,
        easing: 'linear',
        duration: 500,
        queue: false,
        closeChar: '^',
        closeTop: 0,
        closeRight: 0  
    }  

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

    if(options.unstick == true){  
        this.css('position','relative');
        this.append('<a class="scrollFixIt">' + options.closeChar + '</a>');
        jQuery(options.oSelector + ' .scrollFixIt').css('position','absolute');
        jQuery(options.oSelector + ' .scrollFixIt').css('top',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('right',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('cursor','pointer');
        jQuery(options.oSelector + ' .scrollFixIt').click(function() {
            getObject = options.oSelector;
            jQuery(getObject).animate({ top: "0px" },
                { queue: options.queue, easing: options.easing, duration: options.duration });
            jQuery(window).unbind();
            jQuery('.scrollFixIt').remove();
        });
    } 
    jQuery(window).scroll(function() {
        getObject = options.oSelector;
        if(jQuery(window).scrollTop() > (jQuery(getObject).parent().offset().top) &&
           (jQuery(getObject).parent().height() + jQuery(getObject).parent().position().top - 30) > (jQuery(window).scrollTop() + jQuery(getObject).height())){
            jQuery(getObject).animate({ top: (jQuery(window).scrollTop() - jQuery(getObject).parent().offset().top) + "px" }, 
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
        else if(jQuery(window).scrollTop() < (jQuery(getObject).parent().offset().top)){
            jQuery(getObject).animate({ top: "0px" },
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
    });

};

Answer 1

The plugin containedStickyScroll is not written very well, because it has no remove handler.

That leaves you with 3 options:

1. Fork the plugin.

   $.fn.containedStickyScroll = function( options ) {
   
      return this.each(function() {
   
      var self = this;
   
      function remove() {
           getObject = options.oSelector;
           jQuery(getObject).animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration });
           jQuery(window).unbind("scroll", $self.data("containedStickyScroll").scrollHandler);
           jQuery('.scrollFixIt').remove();
   
           $(self).data("containedStickyScroll", false);
      }
   
       if (options == "remove") {
           remove();
           return;
       }
   
       // Make sure that this is only done once.
       if (this.data("containedStickyScroll"))
           return;
   
       var defaults = {  
           oSelector : this.selector,
           unstick : true,
           easing: 'linear',
           duration: 500,
           queue: false,
           closeChar: '^',
           closeTop: 0,
           closeRight: 0  
       }  
   
       var options =  $.extend(defaults, options);
   
       if(options.unstick == true){  
           $(this).css('position','relative');
           $(this).append('<a class="scrollFixIt">' + options.closeChar + '</a>');
           jQuery(options.oSelector + ' .scrollFixIt').css('position','absolute');
           jQuery(options.oSelector + ' .scrollFixIt').css('top',options.closeTop + 'px');
           jQuery(options.oSelector + ' .scrollFixIt').css('right',options.closeTop + 'px');
           jQuery(options.oSelector + ' .scrollFixIt').css('cursor','pointer');
           jQuery(options.oSelector + ' .scrollFixIt').click(remove);
       } 
   
       options.scrollHandler = function () {
           getObject = options.oSelector;
           if(jQuery(window).scrollTop() > (jQuery(getObject).parent().offset().top) &&
              (jQuery(getObject).parent().height() + jQuery(getObject).parent().position().top - 30) > (jQuery(window).scrollTop() + jQuery(getObject).height())){
               jQuery(getObject).animate({ top: (jQuery(window).scrollTop() - jQuery(getObject).parent().offset().top) + "px" }, 
               { queue: options.queue, easing: options.easing, duration: options.duration });
           }
           else if(jQuery(window).scrollTop() < (jQuery(getObject).parent().offset().top)){
               jQuery(getObject).animate({ top: "0px" },
               { queue: options.queue, easing: options.easing, duration: options.duration });
           }
       };
   
       jQuery(window).scroll(options.scrollHandler);
   
       $(this).data("containedStickyScroll", options);
   };};
   

   Now you can do this:

   (function($) {
   
       function contactForm() {
           windowWidth = $(window).width();
           if (windowWidth >= 1024)
               $('#contact-form').containedStickyScroll();
           else
               $('#contact-form').containedStickyScroll("remove");
       };    
   
       // Standard stuff...
   
       $(document).ready(contactForm);
   
       $(window).resize(contactForm);
   
   })(jQuery);
   

   I have also removed a terrible practice of unbinding all event handlers from the window object, which is even worse than option 2.

2. Workaround the problem by removing all event handlers with unbind (including those that are not created by that plugin).

   Not really an option, because the scroll event handler is on the window object and it is very likely that other plugins etc may use the same event handler.

   $(window).unbind("scroll");
   

3. Reset the entire element on the DOM.

   (function() {
   
       var hasContactForm = false,
           $contactForm = $("#contact-form").clone();
   
       function contactForm() {
           windowWidth = $(window).width();
           if (!hasContactForm && windowWidth >= 1024) {
               hasContactForm = true;
               jQuery('#contact-form').containedStickyScroll();
           } else if (hasContactForm && windowWidth < 1024)
               hasContactForm = false;
               $('#contact-form').replaceWith($contactForm);
           }
       };    
   
       // Standard stuff...
   
       $(document).ready(contactForm);
   
       $(window).resize(contactForm);
   
   })();
   

   This may not be a viable solution either because it will also reset any of the users input. However you can add extra logic to carry the user input into the restored contact form.

Considering the many downsides of each option, I would strongly suggest to either find a better plugin, or write your own. Otherwise option 1 is probably the best (if it works).