Discover Endless.JS Plugin!
Hello webmaster! Are you here because you search an original plugin for your website? This article is a demonstration of my jQuery plugin "Endless.JS". Endless.JS allows to do websites designed in cycle.
The idea is to join the top with the bottom or the left with the right. So when you are at the end or the beginning, you can scroll again and you will are done a complete tour.
The installation is very easy. You must just integrate endless.js in the HTML head (after have to import jQuery Library) of your website and to create a little JavaScript snippet to specify which elements will be endless. You can view the source-code of this page by right click in doubt case.
Example :
<!-- Import jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Integrate endless.js plugin -->
<script type="text/javascript" src="http://code.totodu.net/js/endless.js"></script>
<!-- Script using endless.js -->
<script type="text/javascript">
$(document).ready(function(){
$('yourElement').endless({
direction:'vertical', //Direction : up (infinite top scrolling), down (infinite bottom scrolling), vertical (infinite top and bottom scrolling)
scrollbar:'enable', //Enable or disable the scrollbar
prepend:function(){alert("there isn't the boundary at the top");}, //Running when content is prepended
append:function(){alert("there isn't the boundary at the bottom");}, //Running when content is appended
n_prepend:function(){alert("you are now at the top");}, //Running when content in duplicate is removed and that you come from the top
n_append:function(){alert("you are now at the bottom");} //Running when content in duplicate is removed and that you come from the bottom
});
});</script>
<!-- Import jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Integrate endless.js plugin -->
<script type="text/javascript" src="http://code.totodu.net/js/endless.js"></script>
<!-- Script using endless.js -->
<script type="text/javascript">
$(document).ready(function(){
$('yourElement').endless({
direction:'horizontal', //Direction : right (infinite right scrolling), left (infinite left scrolling), horizontal (infinite right and left scrolling)
scrollbar:'disable', //Enable or disable the scrollbar
prepend:function(){alert("there isn't the boundary at the left");}, //Running when content is prepended
append:function(){alert("there isn't the boundary at the right");}, //Running when content is appended
n_prepend:function(){alert("you are now at the left");}, //Running when content in duplicate is removed and that you come from the left
n_append:function(){alert("you are now at the right");} //Running when content in duplicate is removed and that you come from the right
});
});</script>
Plugin is available on GitHub
You mustn't use id in your HTML code element which is in endless, prefer classes.