Infinite Scrolling or Continuous Scrolling UI Pattern

One of the innovative AJAX features I like is the Infinite Scrolling or the Continuous Scrolling UI Pattern you seen in websites like Google Reader and Wikia Search (the open source search engine!)

UIPatterns explains Continuous Scrolling in the following way:
In contrast to the Pagination patterns, the Continuous Scrolling pattern has no natural break. When using pagination patterns, a decision to only show a subset of data at a time and then let the user request more data if wanted is chosen. With the Continuous Scrolling, new data is automatically retrieved as the user has scrolled to the bottom of the page. It thus appears as if the page has no end, as more data will be loaded and inserted into the page each time the user scrolls to the bottom of page.

In my opinion, Infinite Scrolling scores over Paging especially for read-only data and it is more intuitive and accessible.

As this Classic ASP sample shows, implementing Infinite Scrolling is simplified with jQuery. In that sample, new records are fetched dynamically on scrolling to the bottom of a page. The same scrolling effect can also be replicated for a table by restricting it's height by wrapping it within a DIV tag & setting overflow:auto style for the DIV. We can invoke an asynchronous fetch by tracking the Scroll event of the DIV and it's scrollTop value. The triggering point is when the difference of the heights of the TABLE and DIV match the DIV's scrollTop value.

Also see:
Implementing Continuous Scrolling UI Pattern in ASP.NET
HOW TO implement AutoComplete with jQuery & ASP.NET

Comments

  1. Pokerguys1/05/2009 04:51:00 PM

    Old Versions softwares

    http://old-versions.org/

    Old Versions Softwares- Old-Versions.org is an archive of old versions of various programs.

    ReplyDelete
  2. Anonymous9/09/2020 04:29:00 PM

    Hi! Thank you for the article.

    Unfortunately, the code samples on the other websites referred to have since been removed.

    Might you have a way to post the code again for us?

    I am referring to the code in the linked text in the following from your article:

    "As this Classic ASP sample shows, implementing Infinite Scrolling is simplified with jQuery."

    Thank you!

    ReplyDelete
  3. RK9/10/2020 11:26:00 PM

    Here's the archived version of the Classic ASP article - https://web.archive.org/web/20080606021219/http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

    and the ASP.NET version, Implementing Continuous Scrolling UI Pattern in ASP.NET - https://web.archive.org/web/20111103095500/http://www.eggheadcafe.com/tutorials/asp-net/b8381915-06d9-4538-b4bb-5ac2a8e73f34/implementing-continuous-scrolling-ui-pattern-in-aspnet.aspx

    ReplyDelete

Post a Comment

Popular posts from this blog

GitHub Copilot Q&A - 1

Image
Key takeaways from the talk in Q&A format - What is GitHub Copilot and how does it work? GitHub Copilot is a suite of tools designed for code completion. It works by analysing the code and comments you type in your IDE and sending that context to GitHub. Copilot then uses OpenAI's language model (in December 2024, it is GPT 4o by default and you can also choose the preview versions of o1-mini & o1-preview if you like) to understand your intent and generate suggestions for code completion. You can then accept, reject, or modify these suggestions. What context does GitHub Copilot consider when making suggestions? Copilot considers the entirety of the file you are currently working on, not just the code from your cursor position upwards. It also analyses the content of other open tabs in your IDE, starting with those closest to the current tab. This helps Copilot focus on the most relevant information. Is it necessary to meticulously manage open tabs for Copilot to work effect...
Read more

Maven Crash Course - Learn Power Query, Power Pivot & DAX in 15 Minutes

Image
In the Maven Crash Course " Learn Power Query, Power Pivot & DAX in 15 Minutes ", Chris Dutton walks through a hypothetical business case while showcasing the power of modern Excel tools like Power Query, Power Pivot and DAX. Power Query is used to extract, transform, and load data from external sources like SQL databases, PDF and CSV files. A relational model is created to join the tables without writing a single formula. Exploratory analysis is done using Power Pivot and Data Analysis Expressions (DAX). Data Analysis Expressions is the language that we can use to define new calculated columns and measures to enhance our Data Model instead of the traditional cell formulas that we'd typically use if our data was stored in worksheets. Pivot Charts and slicers are used to design a simple interactive report that the sales managers can use to analyze revenue trends and product performance.
Read more

Datawrapper Makes Data Beautiful & Insightful

Datawrapper is an online data visualization tool available at datawrapper.de that lets you create charts, maps and tables. Here's the list of the different visualizations you can create - Bar Chart Stacked Bars Grouped Bars Split Bars Bullet Bars Column Chart Stacked Columns Grouped Columns Lines Multiple Lines Area Chart Scatter Plot Dot Plot Range Plot Arrow Plot Election Donut Pie Chart Multiple Pies Donut Chart Multiple Donuts Choropleth map Symbol map Locator map Table It is self-funded by its customers’ subscription revenue. It also provides a good Free Plan .  The Datawrapper “Created with Datawrapper” attribution appears at the bottom of the chart if you use the free plan. However, you retain full copyright to your charts, maps, and tables. To remove the attribution, you’ll need to update to Custom or Enterprise plan. The Datawrapper River is a place to exchange charts and maps with other Datawrapper users. After adding a chart to the River, anyone can use it and customiz...
Read more