All Projects → metafizzy → Infinite Scroll

metafizzy / Infinite Scroll

📜 Automatically add next page

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to Infinite Scroll

Tokenize2
Tokenize2 is a plugin which allows your users to select multiple items from a predefined list or ajax, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook or tags on tumblr.
Stars: ✭ 74 (-98.94%)
Mutual labels:  ajax, jquery-plugin
Bpage
Based on bootstrap style, static page jump can also be asynchronous page processing pagination plugin
Stars: ✭ 96 (-98.63%)
Mutual labels:  ajax, jquery-plugin
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (-85.13%)
Mutual labels:  ajax, jquery-plugin
Jquery Confirm
A multipurpose plugin for alert, confirm & dialog, with extended features.
Stars: ✭ 1,776 (-74.65%)
Mutual labels:  ajax, jquery-plugin
ajxnetcore
Its an innovative method to turn an ASP.NET Core Application Into Single Page Application, While enhancing the Software performance both on server and client side.
Stars: ✭ 31 (-99.56%)
Mutual labels:  jquery-plugin, ajax
Push State
Turn static web sites into dynamic web apps.
Stars: ✭ 16 (-99.77%)
Mutual labels:  ajax, jquery-plugin
Tag Handler
Tag Handler is a jQuery plugin used for managing tag-type metadata.
Stars: ✭ 76 (-98.92%)
Mutual labels:  ajax, jquery-plugin
Bs grid
Bootstrap Datagrid
Stars: ✭ 184 (-97.37%)
Mutual labels:  ajax, jquery-plugin
Ajax Live Search
AJAX Live Search is a PHP search form that similar to Google Autocomplete feature displays the result as you type.
Stars: ✭ 238 (-96.6%)
Mutual labels:  ajax, jquery-plugin
jq-ajax-progress
jQuery plugin that adds support of `progress` promise
Stars: ✭ 59 (-99.16%)
Mutual labels:  jquery-plugin, ajax
Form
jQuery Form Plugin
Stars: ✭ 5,122 (-26.89%)
Mutual labels:  ajax, jquery-plugin
Cz Parallax
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10 (-99.86%)
Mutual labels:  jquery-plugin
Jquery Powertip
💬 A jQuery plugin that creates hover tooltips.
Stars: ✭ 822 (-88.27%)
Mutual labels:  jquery-plugin
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (-88.52%)
Mutual labels:  ajax
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (-88.74%)
Mutual labels:  jquery-plugin
Saber
⚔️ Saber, PHP异步协程HTTP客户端 | PHP Coroutine HTTP client - Swoole Humanization Library
Stars: ✭ 866 (-87.64%)
Mutual labels:  ajax
Shadow Animation Jquery Plugin
Shadow animation jQuery plugin
Stars: ✭ 9 (-99.87%)
Mutual labels:  jquery-plugin
Timelinejs
🎬 jQuery timeline plugin, easily creates timeline slider.
Stars: ✭ 788 (-88.75%)
Mutual labels:  jquery-plugin
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (-88.85%)
Mutual labels:  jquery-plugin
Blog
关注基础知识,打造优质前端博客,公众号[前端工匠]的作者
Stars: ✭ 6,873 (-1.9%)
Mutual labels:  ajax

Infinite Scroll

Automatically add next page

See infinite-scroll.com for complete docs and demos.

Install

Download

CDN

Link directly to Infinite Scroll files on unpkg.

<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>

Package managers

npm: npm install infinite-scroll

Yarn: yarn add infinite-scroll

License

Commercial license

If you want to use Infinite Scroll to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Infinite Scroll Commercial License at infinite-scroll.com

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Infinite Scroll under the terms of the GPLv3.

Read more about Infinite Scroll's license.

Usage

Infinite Scroll works on a container element with its child item elements

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

Options

let infScroll = new InfiniteScroll( '.container', {
  // defaults listed

  path: undefined,
  // REQUIRED. Determines the URL for the next page
  // Set to selector string to use the href of the next page's link
  // path: '.pagination__next'
  // Or set with {{#}} in place of the page number in the url
  // path: '/blog/page/{{#}}'
  // or set with function
  // path: function() {
  //   return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );
  // }

  append: undefined,
  // REQUIRED for appending content
  // Appends selected elements from loaded page to the container

  checkLastPage: true,
  // Checks if page has path selector element
  // Set to string if path is not set as selector string:
  //   checkLastPage: '.pagination__next'

  prefill: false,
  // Loads and appends pages on intialization until scroll requirement is met.

  responseBody: 'text',
  // Sets the method used on the response.
  // Set to 'json' to load JSON.

  domParseResponse: true,
  // enables parsing response body into a DOM
  // disable to load flat text

  fetchOptions: undefined,
  // sets custom settings for the fetch() request
  // for setting headers, cors, or POST method
  // can be set to an object, or a function that returns an object

  outlayer: false,
  // Integrates Masonry, Isotope or Packery
  // Appended items will be added to the layout

  scrollThreshold: 400,
  // Sets the distance between the viewport to scroll area
  // for scrollThreshold event to be triggered.

  elementScroll: false,
  // Sets scroller to an element for overflow element scrolling

  loadOnScroll: true,
  // Loads next page when scroll crosses over scrollThreshold

  history: 'replace',
  // Changes the browser history and URL.
  // Set to 'push' to use history.pushState()
  //    to create new history entries for each page change.

  historyTitle: true,
  // Updates the window title. Requires history enabled.

  hideNav: undefined,
  // Hides navigation element

  status: undefined,
  // Displays status elements indicating state of page loading:
  // .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error
  // status: '.page-load-status'

  button: undefined,
  // Enables a button to load pages on click
  // button: '.load-next-button'

  onInit: undefined,
  // called on initialization
  // useful for binding events on init
  // onInit: function() {
  //   this.on( 'append', function() {...})
  // }

  debug: false,
  // Logs events and state changes to the console.
})

Browser support

Infinite Scroll v4 supports Chrome 60+, Edge 79+, Firefox 55+, Safari 11+.

For IE10 and Android 4 support, try Infinite Scroll v3.

Development

This package is developed with Node.js v14 and npm v6. Manage Node and npm version with nvm.

nvm use

Install dependencies

npm install

Lint

npm run lint

Run tests

npm test

By Metafizzy 🌈🐻

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].