How to Make Infinite Page Scroll Effect On Static Webpages

Infinitely scrolling jQuery plugin open source preview

Hello friends today we gonna learn about How to Make Infinite Page Scroll Effect On Static Webpages. So read this article, How to Make Infinite Page Scroll Effect On Static Webpages step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Make Infinite Page Scroll Effect On Static Webpages

Users of popular social networks such as Twitter and Tumblr should be familiar with infinite scrolling. This effect is a wonderful dynamic replacement for page links where the user does not have to wait for a page refresh. All external content is dynamically loaded and added to your content wrapper.

But the problem with this effect is how difficult it can be to set up. WordPress users have their choice of plugins to automatically add this effect to archive and category pagesHowever, web developers working in simple HTML5 / CSS3 are forced to use a number of other solutions.

In this article, I want to present two of my favorite plugins for infinite scrolling applied to static web content. Both examples are useful because of the way they handle data requests. Some users may be interested in loading static HTML, while others may require backend languages ​​such as PHP or Ruby. Between both jQuery plugins, we can find a handy solution for any web project.

back to menu ↑

Infinite scroll

I want to start with arguably the most popular jQuery infinite scroll plugin. This was created by Paul Irish and can also be found in the WordPress plugin repository. Most users have given very high ratings for the plugin and it still seems to be supported in the newly released WP 3.5.1.

jQuery plugin infinite scroll web design interface

However, encoding your own custom loader is a bit more difficult. We need to use some jQuery method calls and pass the related data within our layout. Each infinite load plugin requires a set of important elements on the DOM. These include the anchor links for previous / next page, along with the content wrapper that should contain the new data.

Endless scrolling tests

The difference between navSelector and nextSelector is subtle, but certainly important. Your navigation selector can be the element that contains all of the navigation. This can be a div with several pages or even two buttons with previous / next page. However, the following selector focuses solely on your specific anchor link pointing to the next page.

The “path” value is very important because it labels every page we need. The parameter can accept a string value or a custom function that returns to every new pageFor my demo, we’ll use some of the sample code to include three external index pages. The index variable can be passed to the function and you can run logic to determine which page to load next.

Much of this JavaScript code can be placed in an external document if you want to clean it up up the frontend. I would argue that Infinite Scroll has a potentially stressful learning curve if you are not familiar with jQuery. But it works fine if all your files are okay. The biggest disadvantage is that you can only load HTML, JSON or XML pages in the document. It is unlikely that we will ever get support for dynamic PHP, ASP or Python for a backend solution.

back to menu ↑

jQuery ScrollPagination

jquery scroll page plugin live demo

I transferred a few sample codes to my own layout and built a great demo loading content via PHP. But first, you need to get a copy of the Github repo, which contains sample files and a short demo. After extracting the contents, we only need one file named scrollpagination.js to make the effect work. We also need to include a recent version of jQuery, but that should be assumed.

back to menu ↑

Demo for infinite loading

This is the most important content element. All infinite scroll content is loaded into this div.

Loading please wait …
Sorry, there are no more results to display.

You will see that my HTML code is much smaller for this example. The two div elements at the bottom of the page should be hidden by default. These are only displayed up when the plugin is activated to load new content or has reached the end of the contentScrollPagination actually has a parameter to limit the number of new HTML DOM elements we want to add to the page.

back to menu ↑

JS function parameters

The most important part of making this function work is passing the correct data to the correct variables. Compared to the previous Infinite Scroll plugin, we’re looking at a much larger block of data. Some of these parameters refer to functions to call elements when new objects need to be loaded, and when we have exhausted the list of all objects.

var page = 0; $ (function () {$ (‘# content’). scrollPagination ({‘contentPage’: ‘ajax.php’, // the url to get the results from ‘contentData’: {‘page’: page}, ‘scrollTarget ‘: $ (window),’ heightOffset ‘: 10,’ beforeLoad ‘: function () {// for the load function you can use a preloader div $ (‘ # loading ‘). fadeIn ();},’ afterLoad ‘: function (elementsLoaded) {$ (‘# loading’). fadeOut (); var i = 0; $ (elementsLoaded) .fadeInWithDelay (); page ++; if ($ (‘# content’). children () .size ( )> 140) {// if more than 140 results have already been loaded, stop pagination $ (‘# nomoreresults’). FadeIn (); $ (‘# content’). StopScrollPagination ();}}});

So the parameter table of contents will choose up what we need and pass it on to the page via Ajax. This means that we can load dynamic content and still have it parsed by our server. In this example, I’m getting XML data from YouTube and looping through the results in PHP to return a list of videos and thumbnails.

The contentData parameter is also good to use if you need to pass more data in each ajax request. This can be left blank and the plugin will still work properly. But in my example, we can pass the page value for each loading call and increment the page by +1 each time. Unfortunately I have yet to find a method to get this value in the backend PHP code. But it can be just as useful in the JavaScript functions.

// code for fade-in element for element $ .fn.fadeInWithDelay = function () {var delay = 0; return this.each (function () {$ (this) .delay (delay) .animate ({opacity: 1}, 175); delay + = 100;});};

At the very bottom of our ScrollPagination method, we can see another modified piece of code. This does not require any editing on the part of the user, we just need to make sure the function works and is included along with the script codes. fadeInWithDelay will push the same jquery .animate () method to one of the page elements we need.

This makes it a lot easier than copying the same animation codes to every section in the plugin. Although admittedly, this would look much nicer if these codes were stored in a separate JS file (which is possible). However, ScrollPagination’s most redeeming quality has to be its ability to handle backend languages.

Watch our live demo or download a copy of the project source code to run on your own server. This is the best infinite page browsing solution for dynamic websites that are not powered by a CMS.

back to menu ↑

Final Thoughts

I really hope this tutorial can be educational and opens the doors to new infinite tax effects. Web designers have been vigilant to present new trends in a unified and coherent way. This means that users are becoming more accustomed to infinite scrolling in their daily interactions. It is up to designers and developers to keep up with these trends and see how they can be applied to ideas in the future.

Don’t hesitate to download a copy of both demos we presented in the article. Each of their respective HTML pages is constructed using very minimalist code, which makes it easier to copy and implement them yourself. But there are additional parameters for each function that may be of interest to developers. Play with the codes on your own and let us know your thoughts in the post discussion section.

back to menu ↑

How to Make Infinite Page Scroll Effect On Static Webpages: benefits

  • The How to Make Infinite Page Scroll Effect On Static Webpages tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Make Infinite Page Scroll Effect On Static Webpages guide is free.

back to menu ↑

Faq

Tutorial summary of How to Make Infinite Page Scroll Effect On Static Webpages

In this guide, we told you about the How to Make Infinite Page Scroll Effect On Static Webpages; please read all steps so that you understand How to Make Infinite Page Scroll Effect On Static Webpages in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Make Infinite Page Scroll Effect On Static Webpages, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Make Infinite Page Scroll Effect On Static Webpages tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Make Infinite Page Scroll Effect On Static Webpages. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Make Infinite Page Scroll Effect On Static Webpages, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Make Infinite Page Scroll Effect On Static Webpages”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Make Infinite Page Scroll Effect On Static Webpages, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart