background preloader

Infinite scroll

Facebook Twitter

Endless Scrolling. Also known as: Infinite Scrolling, Infinite History, Endless Pageless, LiveGrid Tags: navigation, showing data The most common way to handle large data sets on websites is to use Search Pagination pattern.

Endless Scrolling

Endless scrolling provides an alternative way to get to additional content. When the user scrolls down the page or list and reaches the end of a page/list, more content is being loaded dynamically without a page refresh.Embedded calendar in Google Sites. What problem does the pattern solve? There is a lot of data to be shown, and the user can’t predict where in the list the data he needs is. When to use it? How to use it? Load more content while scrolling. Why to use it? Scrolling is familiar and intuitive – just scroll down for more data. Useful links Example images (1 example) List of popular links on DZone As the user scrolls down, more links are dynamically fetched and shown at the bottom of the page. Added by Janne Lammi July 8, 2010. How to Create an Infinite Scrolling Web Gallery. When working my way through a web gallery, I find it annoying when I must change pages; so in today's tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX.

How to Create an Infinite Scrolling Web Gallery

Let's get started! Step 1: Project Outline We'll begin with a normal gallery page that has a container for our images, and we'll monitor the scroll position by calling a JavaScript function at a quick interval. Each time the scroll bar is near the bottom, we'll make an AJAX request to an external PHP file, which returns a list of image names. Now, all we'll need to do is add these images to our container, thus modifying the page height moving the scroll position higher. Step 2: HTML Markup We'll work with a very basic setup: a header and the container for our images.

Step 3: CSS The CSS is also quite basic. Step 4 Then, for the container and images, I used a bit of CSS3 to add round corners and shadows. Step 5: PHP Script This is going to be very short. Step 6 Step 7 Step 9 Step 10. Infinite Scrolling Best Practices. By anthony on 12/23/10 at 1:06 am Infinite scrolling is a new interface technique you’ll find popping up on various websites.

Infinite Scrolling Best Practices

It allows users to browse through content without clicking on pagination links. Instead, all users have to do is scroll to the bottom of the page and new content will automatically load on the current page. This not only cuts the clicking, but it also cuts the need to load new pages. This new and efficient way to browse content has many advantages. Keep the navigation bar persistently visible When you scroll down a normal web page, the navigation bar gradually loses its visibility. Give users feedback when loading new content When new content is loading, users need a clear sign that the website is doing this.

Show how much content has loaded and how much is left With infinite scrolling, users will inevitably load a lot of content on their page. Use a More button if you have a footer Bring users back to their previous spot when they click back. Web Design Trend Hunting - 15 Amazing Infinite Scrolling Websites. You don’t have to be a big fan of the scrolling bar, you just have to like an endless stream of cool stuff.

Web Design Trend Hunting - 15 Amazing Infinite Scrolling Websites

And who doesn’t? So we’re ready to unveil 15 amazing examples of infinite blogs and a few tutorials on how you could set up something like that. For more interesting articles you should check the Web Design Trend Hunting series. As usual, feel free to suggest other cool examples in the comments. idsgn Tumblr Dashboard Soup Visuelle Suprb Do it for the fame Look Book But does it float LooksLikeGoodDesign Reform & Revolution Paranaiv Type Neu FlickRiver Css Line Bonus – Good things should never end Resources.