jQuery.Screw Examples - Loading External And Internal Content - JasonLau.biz

This page demonstrates using jQuery.Screw to load external or internal content.

External means the HTML content is imported and loaded from another file. The URL for the remote file is placed in the rel attribute of an HTML tag. The external file can be local or remote.

You can use GET to pass variables to your script if necessary. <div class="screw" rel="lipsum.php?p=3&s=40"></div>

Internal means the HTML content is loaded from the rev attribute of a HTML tag. The HTML to be loaded is encoded and inserted in the rev attribute of the HTML tag. The content is loaded when the tag is scrolled into view.

jQuery.Screw is called on the body selector.

<script type="text/javascript" src="js/jquery.1.6.1.js"></script>
<script type="text/javascript" src="js/jquery.screw.js"></script>
<script type="text/javascript">

// Initialize jQuery
jQuery(document).ready(function($){

// Call screw on the body selector
$("body").screw({
loadingHTML: '<img alt="Loading" src="images/ajax-loader-red.gif">'
});

});

</script>


Loading From An External Source

In this example, the external file's URL is used in the rel attribute of a span tag. The span tag is assigned the required class screw. Alternatively, any HTML tag which can hold content can be used instead of the span tag.

<span class="screw" rel="lipsum.html"></span>
Or
<div class="screw" rel="lipsum.html"></div>
Or
<p class="screw" rel="lipsum.html"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris risus, pellentesque id aliquet eget, porta quis elit. Donec at urna tellus. Sed bibendum dui sit amet orci tempus iaculis. Pellentesque lacinia congue molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sed dui quis ligula lobortis tincidunt. Quisque et orci vitae nisi dictum imperdiet. Aliquam velit nibh, hendrerit in pellentesque eget, ornare quis tellus. Nunc condimentum, lectus non pellentesque mollis, ante nisi tristique nibh, non facilisis tellus ligula eu metus. Morbi ac ligula nec sem consectetur rhoncus. Curabitur tellus risus, fermentum nec varius rutrum, ultricies ut diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus convallis nibh, non vestibulum urna mattis a. Proin aliquet nibh sit amet lectus pellentesque mollis. Nullam eget tellus nisi, ut aliquam augue. Suspendisse consequat, nisl eleifend eleifend egestas, magna quam pretium nunc, sed auctor sapien ante et urna. Quisque condimentum, urna ut molestie congue, metus dui dictum enim, in gravida justo dui gravida neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel tempus sapien.

Example Padding
Example Padding
Example Padding
Example Padding

Tabled Data

The following example loads table cells from an external file. This method could be used to display tabled data from a database.

<table border="1px">
<tr class="screw" rel="table_cells.html">
</tr>
<tr class="screw" rel="table_cells.html">
</tr>
<tr class="screw" rel="table_cells.html">
</tr>
<tr class="screw" rel="table_cells.html">
</tr>
</table>

Loading From An Internal Source

In this example, the HTML to be loaded is placed in the rev attribute of a span tag. The span tag is assigned the required class screw. Alternatively, any HTML tag which can hold content can be used instead of the span tag.

<span class="screw" rev="&lt;div style=&quot;background-color:yellow;& id=&quot;internal-content&quot;&gt;Lorum ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris risus, pellentesque id aliquet eget, porta quis elit. Donec at urna tellus. Sed bibendum dui sit amet orci tempus iaculis. Pellentesque lacinia congue molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sed dui quis ligula lobortis tincidunt. Quisque et orci vitae nisi dictum imperdiet. Aliquam velit nibh, hendrerit in pellentesque eget, ornare quis tellus. Nunc condimentum, lectus non pellentesque mollis, ante nisi tristique nibh, non facilisis tellus ligula eu metus. Morbi ac ligula nec sem consectetur rhoncus. Curabitur tellus risus, fermentum nec varius rutrum, ultricies ut diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus convallis nibh, non vestibulum urna mattis a. Proin aliquet nibh sit amet lectus pellentesque mollis. Nullam eget tellus nisi, ut aliquam augue. Suspendisse consequat, nisl eleifend eleifend egestas, magna quam pretium nunc, sed auctor sapien ante et urna. Quisque condimentum, urna ut molestie congue, metus dui dictum enim, in gravida justo dui gravida neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel tempus sapien.&lt;/div&gt;"></span>

©2011 Jason Lau