Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jasonlau/jQuery-Screw

Screw (scroll + view) is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling pages where content is appended to the bottom as the user scrolls.
https://github.com/jasonlau/jQuery-Screw

Last synced: 13 days ago
JSON representation

Host: GitHub
URL: https://github.com/jasonlau/jQuery-Screw
Owner: jasonlau
Created: 2010-11-14T23:25:43.000Z (almost 14 years ago)
Default Branch: master
Last Pushed: 2012-11-12T16:34:01.000Z (about 12 years ago)
Last Synced: 2024-08-01T22:54:06.330Z (3 months ago)
Language: JavaScript
Homepage: http://jasonlau.biz/home/jquery/screw-a-jquery-plugin
Size: 211 KB
Stars: 52
Watchers: 4
Forks: 26
Open Issues: 1
Metadata Files:
- Readme: README.txt

Awesome Lists containing this project

README

        /* 

    Screw - A jQuery plugin

    ==================================================================

    ©2010 - 2012 JasonLau.biz - Version 1.0.7

    ==================================================================

    This program is free software: you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation, either version 3 of the License, or

    (at your option) any later version.

    This program is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License

    along with this program.  If not, see .

    

*/

---------------------------------------------------------------------

Options

---------------------------------------------------------------------

Name: loadingHTML

Description: A string consisting of optional HTML which is displayed before the object is loaded.

---------------------------------------------------------------------

Classes

---------------------------------------------------------------------

Name: screw

Description: Applies Screw to this object. If you want to load your HTML from an external file use the rel attribute to hold the path to the (local) external file. This uses GET, so you can pass data using the query string. You can alternatively use the rev attribute to hold the HTML you want to load instead of using the rel attribute to load an external file.

Name: screw-before 

Description: Inserts the HTML before the object with this class.

Name: screw-after

Description: Inserts the HTML after the object with this class.

Name: screw-append

Description: Appends the HTML to the object with this class.

Name: screw-prepend

Description: Prepends the HTML to the object with this class.

Name: screw-repeat

Description: Repeats screw each time the trigger point is reached. This is for effects like continuous scrolling pages where data is appended to the bottom of the page as the user scrolls.

Name: screw-image

Description: Use the rel attribute to hold a image URL. The image will be preloaded and loaded into the object with this class. You do not need to use any other classes with this class.

Name: screw-remove

Description: Objects with this class are hidden when they are scrolled beyond the top or right of the viewport.

Name: screw-replace

Description: Replaces the object with internal or external data. Use the "rel" attribute to hold the URL for the external data, OR use the "rev" attribute to hold the HTML you want to load. External data is loaded using ajax GET so you may pass variables using the query string.

---------------------------------------------------------------------

Usage

---------------------------------------------------------------------

Call screw on the body selector, or any other scrollable object, and set up your HTML to utilize it.

 

jQuery(function(){

   $('#my-div').screw();

});



Or:



Or:

Loading ... 

Or:



Or (endless scrolling):



---------------------------------------------------------------------

Loading Page Fragments

---------------------------------------------------------------------

Add the data-load attribute to the screw object. Insert the id or class-name for the remote 

object you wish to load.

Example:

Loading by ID attribute -



Loading by css class-name -



---------------------------------------------------------------------

Project Home & Demo Pages

---------------------------------------------------------------------

http://jasonlau.biz/home/jquery/screw-a-jquery-plugin