jquery4u.com - Archives (avril 2016)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
This article was peer reviewed by Wern Ancheta and Camilo Reyes. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Almost all user interactions within a webpage can be captured in jQuery as events. Events are important in the sense that they allow you to respond appropriately based […]
Continue reading %A Comprehensive Look at Events in jQuery%
Infinite scrolling is now a common feature and there are several cases where it is really useful. For instance there are some websites where we simply can't imagine a good pagination system, like Twitter or even Facebook. Another example of where infinite scrolling can be useful is for a search engine: you'll want to continue viewing new links while you don't find the one you want, and a pagination system can slow you down in your research.
[author_more]
If you need to use infinite scrolling for your project, here are six demos that you can use as inspiration to implement it.
Note that, except for the last one, all these demos are written with jQuery and some examples are using jQuery plugins. However, other examples can easily be adapted for vanilla JS without any problem.
1. Infinite Scrolling and Grids
This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin is good for obtaining fluid grid layouts. The Infinite Scroll plugin by Paul Irish is good at loading pages that already exist (so it is good for your SEO). You can use it to load static pages such as page2.html, page3.html, etc., but this plugin also handle generated pages, such as page.php?p=2, page.php?p=3. However, to use it you need to have a page number to increment in your URLs so, if you have pages such as page.php?data=xxx, then this plugin is not for you.
Usage - HTML
[html]
<div class="grid">
<div class="grid-item grid-item-2">
<p>content</p>
</div>
…
</div>
<!-- The next page which content will be loaded when scrolled -->
<nav id="pagination">
<p><a href="page-2.html">Page 2</a></p>
</nav>
[/html]
Usage - jQuery
[js]
$(document).ready(function() {
var grid = $('.grid');
grid.masonry({
itemSelector: '.grid-item',
columnWidth: 200
});
grid.infinitescroll({
// Pagination element that will be hidden
navSelector: '#pagination',
// Next page link
nextSelector: '#pagination p a',
// Selector of items to retrieve
itemSelector: '.grid-item',
// Loading message
loadingText: 'Loading new items…'
},
// Function called once the elements are retrieved
function(new_elts) {
var elts = $(new_elts).css('opacity', 0);
elts.animate({opacity: 1});
grid.masonry('appended', elts);
});
});
[/js]
2. Infinite Scrolling through Blog Posts
This demo doesn't use any plugin or library to handle the infinite scrolling feature. Each time the end of the page is reached by the user, it loads a new post, generated by a PHP script that echoes the corresponding HTML code. The demo never reaches the end of content but you can achieve this by, for example, echoing an empty string when there is no more posts to show. We display a loading image at the end of the page, in the spirit of Twitter.
Note that, in the live demo below, the new posts are generated by a JavaScript function, as we can't use a PHP script in CodePen.
See the Pen Infinite Scrolling through Blog Posts by SitePoint (@SitePoint) on CodePen.
Usage - HTML
[html]
<ul id="posts">
<li>
<article>content</article>
</li>
…
</ul>
<p id="loading">
<img src="images/loading.gif" alt="Loading…" />
</p>
[/html]
Usage - jQuery
[js]
$(document).ready(function() {
var win = $(window);
// Each time the user scrolls
win.scroll(function() {
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()) {
$('#loading').show();
$.ajax({
url: 'get-post.php',
dataType: 'html',
success: function(html) {
$('#posts').append(html);
$('#loading').hide();
}
});
}
});
});
[/js]
3. Infinite Scrolling through Images
This demo loads in images on infinite scroll and never reaches the end. It uses the jQuery Endless Scroll plugin which can be customized to trigger loading x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on, but the script can be customized to load the images from different sources quite easily.
See the Pen Infinite Scrolling through Images by SitePoint (@SitePoint) on CodePen.
Usage - HTML
[html]
<ul id="images">
<li>
<a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
<img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
</a>
</li>
…
</ul>
[/html]
Usage - jQuery
[js]
$(document).ready(function() {
$(window).endlessScroll({
inflowPixels: 300,
callback: function() {
var last = $('#images li:last');
last.after(last.prev().prev().prev().prev().clone());
}
});
});
[/js]
Continue reading %6 jQuery Infinite Scrolling Demos%
In today’s post we bring to you 10 jQuery Horizontal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :)
Updated: March 2016 Updated all plugins and demos with the latest versions and added some new ones. Also removed plugins which aren't in development anymore.
1. ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. Its lightweight (6KB gzipped) and mobile friendly. It has support for both scroll directions.
2. jInvertScroll
jInvertScroll is a lightweight plugin for jQuery that allows you to move in the horizontal with a parallax effect while scrolling down.
3. Horizontal Timeline
This tutorial will teach you to create an easy to customise, horizontal timeline powered by CSS and jQuery.
4. Smooth Horizontal Scrolling with jQuery
This tutorial will teach you how to create a simple smooth scrolling effect using the jQuery Easing Plugin and just a few lines of jQuery.
5. simplyScroll
Continue reading %10 jQuery Horizontal Scroll Demos & Plugins%