Site Improvements - Part 3 - Infinite Blog Scrolling
11/11/13 -05:47 Filed in: Website | RapidWeaver
Part 3 of this blog series will cover a coincidental improvement I was able to make to the blogs on this site while the site was undergoing it’s recent renovation. It was a very simple to implement, but actually makes for a big ease of use improvement to the blogs. This improvement was a Java script added to the blog section that allows the blog to keep expanding and adding more entries automatically as you scroll down the page.
Lets begin at the beginning. The stock blog page for RapidWeaver has a setting for how many entries to display on the main blog page. The idea here is to keep the page loading times down. Rather than load all 60 plus pages from the 2012 blog when the page is loaded, it loads the latest “xx” blogs per my settings. To view additional entries you can click on the 2012 Blog Archive link in the sidebar to view a chronological listing of all blog entries for a given year. One of the powerful features of my website software, RapidWeaver, is it’s extensibility. You can use it out of the box and do a very serviceable , pleasant-to-look-at website. But the software also allows you to add extensions, referred to as Plug-ins, to add many advanced user features. If you know the HTML language you are also able to add snippets of HTML code to modify the appearance or behavior of the site.
While I was renovating the site, I discovered an HTLM snippet that added an infinite scroll to the blog page. I was actually investigating RapidWeaver plug-ins and one of the RapidWeaver plug-in vendors, Weaveraddons, made this code available for free. The download consisted of a Java snippet which gets added to the RapidWeaver Resources section and you are provided with a simple front end that allows you to change settings to customize the features to your needs. In less time than it has taken to write this paragraph, I had the feature running in the blog sections for every year.
As you scroll to the bottom of the blog page a progress bar appears with a message telling you that the next page is loading (left) and the content of the next page appears (right).
So what exactly does this feature work and what does it do? It works very well thank you and it is transparent to the end user. Simply scroll to the bottom of web page. When you get to the bottom of the first 10 entries you will see a message saying it is loading the next page. You may also briefly see a progress bar and then the next 10 entries will appear below the previous 10 entries. On my cable modem based internet service the message and progress bar come and go quickly because the pages themselves load so quickly. When you get to the last blog entry you will see a message telling you that you have reached the end of the page.
When you reach the last blog entry for a given year you will see a message telling you just that.
It doesn’t get easier for a RapidWeaver website designer or the end user. Additionally the price was right: F-R-E-E !! For a RapidWeaver user you are provided with a block of text you paste into the Resources area of the RapidWeaver content sidebar. A block of text is generated that you paste into the Header Area of the Blog Page in the Page Inspector. For the end user just scroll down. When you reach the bottom of the current page, new content is automatically added until you reach the final entry. Now if you are the impatient type and don’t want to scroll through all the entries, there is always the Blog Archive page for that years blog. This is found towards the bottom of that pages sidebar. Clicking on the “20xx BLOG ARCHIVE” link brings you to a chronological index listing of all of the blog entries for that year. If you are a fellow RapidWeaver user, I will provide a link to the Infinite Scrolling Blog Utility web page.
SOME RELATED LINKS: Here are the links to the other entries in this series as well as the link to the RapidWeaver utility used for infinite blog scrolling.
INFINITE BLOG SCROLLING UTILITY Weaveraddons Website
SITE IMPROVEMENTS - PART 1 - RESPONSIVE DESIGN Blog Entry
SITE IMPROVEMENTS - PART 2 - GEAR LISTINGS Blog Entry
SITE IMPROVEMENTS - PART 3 - INFINITE BLOG SCROLLING Blog Entry
SITE IMPROVEMENTS - PART 4 - IMAGE WAREHOUSING Blog Entry
BACK TO BBQ BLOG 2013
ARCHIVE OF BLOGS: 2013
INDEX OF BLOGS: ALL YEARS