Screw, a word I re-coined from 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, bottomless pages where content is appended to the bottom as the user scrolls.
As of version 1.0.5, Screw supports both vertical AND horizontal scroll detection. Screw can also be called on the BODY selector or any other scrollable object.
Examples – Loading Images
Examples – Loading External And Internal Content
Live Demo – Continuous Vertical Scrolling
Options
Name: loadingHTML
Description: A string consisting of optional HTML which is displayed before the object is loaded. This option is only used if a insertion position class is not used.
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 loaded into the object with this class. You do not need to use the class screw 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 existing content with the new content.
Name: screw-xml
Description: The output data type for objects with this class will be XML. Default is HTML.
Name: screw-json
Description: The output data type for objects with this class will be JSON. Default is HTML.
Name: screw-script
Description: The output data type for objects with this class will be Script. Default is HTML.
Usage
Call screw on the body selector or any other scrollable object and set up your HTML to utilize it.
<script type="text/javascript">
jQuery(function($){
$("body").screw({
loadingHTML: '<img alt="Loading" src="loading-image.gif">'
});
});
</script>
OR
<script type="text/javascript">
jQuery(function($){
$("#example-div").screw({
loadingHTML: '<img alt="Loading" src="loading-image.gif">'
});
});
</script>
The rev attribute is used to hold the HTML to load. Be sure to escape the HTML you’re loading. You can use my Postable Code generator to escape your HTML. In the Postable Code generator, select the “None” brush.
<p class="screw" rev="<img src='my-image.jpg' />"></p>
Or use the rel attribute instead to GET the HTML from a local external file.
<p class="screw" rel="screw-test.php?key1=value&key2=value"></p>
Load the HTML before the object:
<span class="screw screw-before" rev="<img src='my-image.jpg' />"></span>
Load the HTML after the object:
<p class="screw screw-after" rev="<img src='my-image.jpg' />"></p>
Append the HTML to the object:
<hr class="screw screw-append" rev="<img src='my-image.jpg' />" />
Prepend the HTML to the object:
<p class="screw screw-prepend" rev="<img src='my-image.jpg' />"></p>
Load an image with .screw-image. Use the rel attribute to hold the URL to the image. Can be local or remote.
<span class="screw-image" rel="my-image.jpg">Loading ... </span>
Endless scrolling:
<p class="screw screw-before screw-repeat" rev="<img src='my-image.jpg' />"></p>
Or
<div class="screw screw-before screw-repeat" rel="next_article.php?key1=value&key2=value"></div>
Control the output data type:
<div class="screw screw-before screw-repeat screw-xml" rel="next_article.php?key1=value&key2=value"></div>
Loading Page Fragments
The data-load attribute enables loading of remote webpage-fragments. For example, you can load a specific, remote image or container by adding it’s id or class-name to the data-load attribute as seen in the examples below.
Load a remote object by css class-name:
<div class="screw screw-append" data-load=".my-class" rel="next_article.php?key1=value&key2=value"></div>
Load a remote object by id:
<div class="screw screw-append" data-load="#my-id" rel="next_article.php?key1=value&key2=value"></div>
Using additional selectors:
To aid in selecting specific objects, Screw supports all of the selectors which are supported by jQuery.
<div class="screw screw-append" data-load="#my-id:first" rel="next_article.php?key1=value&key2=value"></div>
<div class="screw screw-append" data-load=".my-class:last" rel="next_article.php?key1=value&key2=value"></div>
<div class="screw screw-append" data-load=".my-class[name='my_input']" rel="next_article.php?key1=value&key2=value"></div>
<div class="screw screw-append" data-load=".my-class:contains('specific text')" rel="next_article.php?key1=value&key2=value"></div>