fredwu/jquery-endless-scroll fredwu/jquery-endless-scroll

  • Stars
    star
    838
  • Rank 52,403 (Top 2 %)
  • Language
    CoffeeScript
  • Created over 14 years ago
  • Updated almost 7 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
fredwu/jquery-endless-scroll
github

fredwu

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Endless/infinite scrolling/pagination.

Endless Scroll endorse

If you encounter problems with scrolling up, please use the old 1.6.0 release. The code base is currently being rewritten on the 2.0-rewrite branch.

If you don't already know, endless scrolling (or infinite scrolling or pagination) is a popular technique amongst modern websites such as Google Reader and Live Image Search, whereby instead of paging through items using traditional pagination links, the page just keeps loading with new items attached to the end.

Endless Scroll not only helps you build highly customisable infinite scrolling effects, it also offers features not commonly seen. Such features include:

  • The ability to up-scroll and prepend content to the beginning of the page
  • The ability to limit the number of available 'pages', i.e. data truncation
  • And there are more exciting features in the works, including SEO-friendly URLs!

Configuration

There are a few options to customise the behaviour of this plugin:

Option Type Description
pagesToKeep Integer The number of 'pages' to keep before either end of the scrolling content are discarded, by default (value set to `null`) no content will be discarded.
inflowPixels Integer The number of pixels from the boundary of the element that triggers the event.
fireOnce Boolean Only fire once until the execution of the current event is completed.
fireDelay Integer Delays the subsequent firing, in milliseconds, 0 or false to disable delay.
loader String The HTML to be displayed during loading.
content String or Function Plain HTML content to insert after each call, can be either a string or a function that returns a string, when passed as a function it accepts three arguments:
  • fireSequence the number of times the event triggered during the current page session
  • pageSequence a positive or negative value that represents the scroll direction sequence
  • scrollDirection a string of either 'prev' or 'next'
insertBefore String jQuery selector syntax: where to put the loader as well as the plain HTML data.
insertAfter String jQuery selector syntax: where to put the loader as well as the plain HTML data.
intervalFrequency Integer Set the frequency of the scroll event checking, the larger the frequency number, the less memory it consumes - but also the less sensitive the event trigger becomes.
ceaseFireOnEmpty Boolean Ceases fire automatically when the content is empty, set it to `false` if you are using `callback` instead of `content` for loading content.
resetCounter Function Resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event.
callback Function Callback function, accepts three arguments:
  • fireSequence the number of times the event triggered during the current page session
  • pageSequence a positive or negative value that represents the scroll direction sequence
  • scrollDirection a string of either 'prev' or 'next'
ceaseFire Function Stops the event (no more endless scrolling) if the function returns true, accepts three arguments:
  • fireSequence the number of times the event triggered during the current page session
  • pageSequence a positive or negative value that represents the scroll direction sequence
  • scrollDirection a string of either 'prev' or 'next'

Usage

// using default options
$(window).endlessScroll();
// using some custom options
$("#images").endlessScroll({
  fireOnce: false,
  fireDelay: false,
  loader: '<div class="loading"><div>',
  callback: function(p){
    alert("test");
  }
});

Custom Loader Styles

You may customise the look and feel of the loader by changing:

  • .endless_scroll_loader (class, for all Endless Scroll loaders);
  • Or #endless_scroll_loader_<scroller_dom_html_id> (id, for the specific loader).

Custom Style for the Most Recently Loaded Content

The most recently loaded content is wrapped in #endless_scroll_content_current.

Demo

Click here for a simple demo.

CoffeeScript and JavaScript

Endless Scroll, starting from v1.6.0 is written in CoffeeScript. To contribute and/or modify the source code, please edit src/jquery.endless-scroll.coffee and recompile the JavaScript. To include Endless Scroll in your webpage, please use the compiled js/jquery.endless-scroll.js.

The command for automatically compiling to JavaScript is:

coffee -w -b -o js/ -c src/

Browser Support

All modern browsers (Firefox, Chrome, Safari, Opera, IE7+) should be supported. Please open an issue if Endless Scroll doesn't work on a particular browser.

Changelog

v1.8.0 [2012-04-17]

  • Added ceaseFireOnEmpty.
  • Added pagesToKeep.
  • Fixed $(window) uses.

v1.7.1 [2012-04-16]

  • Added scrollDirection to the callback arguments.
  • Fixed the demo.

v1.7.0 [2012-04-16]

  • Endless Scroll now supports infinite up-scrolling!
  • Renamed bottomPixels option to inflowPixels.
  • Added insertBefore option.
  • Added pageSequence to the callback arguments.
  • Fixed the unreliable #endless_scroll_content_current wrapper.

v1.6.0 [2012-04-15]

  • Refactored the code using CoffeeScript.
  • Renamed data option to content.
  • Tweaked the demo page.

v1.5.1 [2012-03-08]

  • Added fireSequence argument to ceaseFire.
  • Added a ceaseFire example to the demo page.
  • Fixed loader.

v1.5.0 [2012-03-08]

  • Added intervalFrequency option.
  • Endless Scroll should now consume less memory in most situations.

v1.4.8 [2011-11-18]

  • Refactored default options merge to avert side effects.

v1.4.7 [2011-11-08]

  • Compatibility fix for IE7 and IE8.

v1.4.6 [2011-10-26]

  • Fixed an issue with inner_wrap and the first scroll event.

v1.4.5 [2011-09-25]

  • ceaseFire now works as expected during a scroll event.

v1.4.4 [2011-06-28]

  • The AJAX loader should be removed when there's no more results to load.

v1.4.3 [2011-06-28]

  • The data option now accepts a fireSequence argument too.

v1.4.2 [2011-01-08]

  • Fixed a bug where calling the script on $(document) would fail.

v1.4.1 [2010-06-18]

  • Fixed a bug where the callback fires when the inner wrap hasn't been created.

v1.4 [2010-06-18]

  • Endless Scroll now works with any elements, not just $(document)!

v1.3 [2009-04-20]

  • Fixed a bug caused by fireDelay.

v1.2 [2009-01-16]

  • Added resetCounter option.

v1.1 [2009-01-15]

  • Added fireDelay option.

v1.0 [2009-01-15]

  • Initial release.

More jQuery Plugins

Check out my other jQuery plugins:

  • Inline Confirmation - One of the less obtrusive ways of implementing confirmation dialogues.
  • Slideshow Lite - An extremely lightweight slideshow plugin for jQuery.

License

Copyright (c) 2008-2012 Fred Wu

Dual licensed under the MIT and GPL licenses.

Bitdeli Badge

More Repositories

1

crawler

A high performance web crawler / scraper in Elixir.
Elixir
917
star
2

angel_nest

Project code name: Angel Nest. :)
Ruby
775
star
3

api_taster

A quick and easy way to visually test your Rails application's API.
Ruby
728
star
4

simple_bayes

A Naive Bayes machine learning implementation in Elixir.
Elixir
392
star
5

datamappify

Compose, decouple and manage domain logic and data persistence separately. Works particularly great for composing form objects!
Ruby
332
star
6

opq

Elixir queue! A simple, in-memory queue with worker pooling and rate limiting in Elixir.
Elixir
255
star
7

stemmer

An English (Porter2) stemming implementation in Elixir.
Elixir
149
star
8

bustle

Activities recording and retrieving using a simple Pub/Sub-like interface.
Ruby
93
star
9

ruby_decorators

Ruby method decorators inspired by Python.
Ruby
63
star
10

inherited_resources_views

Share and DRY up views between resources. Use with Inherited Resources.
Ruby
60
star
11

jquery-inline-confirmation

Inline Confirmation plugin for jQuery. One of the less obtrusive ways of implementing confirmation dialogues.
JavaScript
53
star
12

toy-robot-elixir

The infamous Toy Robot code test done in Elixir.
Elixir
45
star
13

skinny-coffee-machine

A simple JavaScript state machine with observers, for browsers and Node.js.
JavaScript
42
star
14

kohana-phamlp

This module is a bridge between the Kohana PHP framework (http://kohanaframework.org/) and the PHamlP library (http://code.google.com/p/phamlp/).
PHP
25
star
15

authlite

Authlite, an auth module for Kohana PHP framework, it offers greater flexibility than the official Auth module.
PHP
23
star
16

dotfiles

My dotfiles
Shell
18
star
17

amaze_hands

Amaze Hands is an amazing tool developed for analysing Kanban board cards.
Ruby
15
star
18

kthrottler

A Kohana port of Action Throtller (for Rails): http://github.com/fredwu/action_throttler
PHP
14
star
19

jquery-slideshow-lite

An extremely lightweight slideshow plugin for jQuery.
JavaScript
14
star
20

code-test-2016-cultureamp

Ruby
13
star
21

README-xplor

Fred @ Xplor - how to work with me.
10
star
22

code-test-2016-myob

Ruby
8
star
23

code-test-2016-trunkplatform

Ruby
6
star
24

action_throttler

An easy to use Rails plugin to quickly throttle application actions based on configurable duration and limit.
Ruby
6
star
25

app_reset

Resets (and if available, seeds) your databases.
Ruby
6
star
26

yield.rb

Aggregated token amounts and values. Supports ApeBoard, YieldWatch, Binance, CoinGecko and more.
Ruby
5
star
27

layerful

Layerful PHP framework.
4
star
28

advent_of_code_2018

https://adventofcode.com/2018/about
Elixir
4
star
29

security_guard

A collection of useful tools for auditing data and performing security checks.
Ruby
3
star
30

fredwu.me-v3

JavaScript
3
star
31

ruby-slim-tmbundle

https://github.com/slim-template/ruby-slim.tmbundle
3
star
32

flower

Playground to test out the Lotus framework.
Ruby
2
star
33

kata-poker-hands-elixir

A coding kata for comparing poker hands - Elixir version.
Elixir
2
star
34

jqstub

A simple stub library for jQuery / Zepto objects.
JavaScript
1
star
35

project_retard

One sale a day e-commerce platform built on Ruby on Rails.
JavaScript
1
star
36

toy-robot-lolz

It's art. And it's beautiful.
Ruby
1
star
37

reacraft

Ruby
1
star
38

kata-poker-hands-ruby

A coding kata for comparing poker hands - Ruby version.
Ruby
1
star
39

spiky_xml

Just a spike on XML parsing in different environments.
JavaScript
1
star
40

code-test-2016-adslot

CoffeeScript
1
star