Archive for October 2009

jQuery plugin: Scroll Loader


Overview

Load extra content when the user scrolls the window or an element towards the bottom. This is probably most useful when you want to use Ajax to load the extra content.

Syntax

$(element).scrollLoader(options);

Options

ratio (optional – default: .05): How close to the scrollbar is to the bottom of the element before triggering a load. Use ratio: 0 for absolute bottom.
Ratio = (total scroll height – current scroll position) / total scroll height.

loadContent (required): Function to execute when the scrollbar reaches the specified ratio.

Available Triggers

$(element).trigger("enableLoad"); // enables this plugin

$(element).trigger("disableLoad"); // disables this plugin

$(element).trigger("manualLoad"); // manually trigger the loadContent function

Example Usage

var offset = 2;
$(document).ready(function() {
  $(window).scrollLoader({
    loadContent: function() {
      $("#news_list").append("<li>Loading...</li>");
      // since this ajax call might take a while
      $(window).trigger("disableLoad");
      $.getJSON("/news/list?offset=" + offset++, function(data) {
        // remove the loading text
        $("#news_list li:last").remove();
        for (var i = 0; i < data.news.length; i++) {
          $("#news_list").append("<li>" + data.news[i].headline + "</li>");
        }
        // now that the ajax call is done, we can re-enable this
        $(window).trigger("enableLoad");
      });
    }
  });
});

Demo - scrollLoader bound to both the window and an element with overflow: auto
Download - jquery.scroll.loader.js

jqModal IE7 Black Flicker Bug


jqModal r14 has an odd bug that only occurs on IE7 only, where the screen will flicker black before displaying the modal window.  This only happens when you use the options modal: true and overlayClass. I did some digging through the source and found a quick workaround – change line 41 from:

if(c.modal) {if(!A[0])L('bind');A.push(s);}

to

if(c.modal) {A.push(s);}

Or just get the updated file here.

Since jqModal’s source is minified, I’m not 100% sure what the removed piece of code was meant to do, but from what I’ve tested, the behavior is still the same.

Quick demos are here: