• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Ajax / Infinite Scroll and MatchHeight.js

Infinite Scroll and MatchHeight.js

By Victor M. Font Jr.
May 10, 2016Leave a Comment

Contents
  • Overview
  • The Requirements
  • The Challenge
  • The Solution

Overview

Infinite Scroll and MatchHeight.js Arm Wrestling public domain image from Pixabay.com

Every once in a while, writing and testing code can be a little like arm wrestling or maybe even like pulling teeth. Things can be going along smooth as silk and then all of a sudden you hit a requirement that, on the surface at least, seems easy enough. But, as you dive into its construction, it turns out to be difficult and time consuming to find just the right combination of plugins, extensions, or algorithms that work, especially when executing them through Ajax callbacks.

Such is the case for a problem solved for Southern Home Design Plans, a site for selling custom home designs, owned and operated by a very talented architectural firm in Cary, North Carolina. The site is built with a highly customized Genesis Framework child theme and WooCommerce.

The Requirements

The WooCommerce shop page is highly customized. In fact, when you see it, you wouldn't even know that it's WooCommerce because other than displaying 3 house plans per row, there is no further resemblance to anything WooCommerce vanilla. The first requirement for the catalog page is to display all the house plans using infinite scroll for pagination. As you know, infinite scroll works by invoking an Ajax script when a user scrolls to the bottom of the page. The Ajax routine loads new products and extends the size of the page.

To satisfy this requirement, we used the very popular Animated Infinite Scroll plugin available from Code Canyon. The plugin is easy enough to setup and it works like a charm. And SBThemes, the author, provides great support.

The second requirement, also known as the better half of this challenge, is making sure the custom image areas are all the same size per each row. To visualize what I mean, look at the following image from the development site. (This is still a work in progress so please don't be too critical.)

Row of house plans from http://shdplans.com/

The width of these images is 332px. As you can see, their heights are very different. This is the nature of house plans. When you drive down the street or walk through your neighborhood, the homes may appear to be similar in width or design, but their heights can be very different. The requirement is to keep the appearance of the catalog images consistent so each product in a catalog row presents with the same height. The rows have to be even.

To accommodate this, the image is wrapped in a parent div:

To make certain that the parent container is the same height within each row, we use the jQuery MatchHeight.js extension. This extension calculates the height of each parent div after the images load and adjusts them to the same height if necessary. It does a great job and is fairly easy to use.

The Challenge

As well as these two tools work individually, getting them to work together in concert proves challenging. This is directly related to how Ajax works in browsers. We've discussed this before in a previous post, Formidable Pro: Invoke Ajax on Submit, so we won't repeat the details here. But in summary, the problem boils down to a timing issue. The Ajax callback in the Animated Infinite Scroll plugin executes the matchHeight function before all of the images load. This results in an uneven page.

The Solution

The solution to this problem requires holding back on the matchHeight function until all the images load. But how do we do that? Some recommendations suggest using the jQuery(window).load() function. This sounds like a great idea except that the page will often load before all images have been downloaded. Again, this results in incomplete results and an uneven page.

The first thing we tried is the jQuery waitForImages extension. After spending several hours trying every conceivable combination of parameters, this plugin just won't work in the Ajax callback. The results were always the same. The rows were never completely balanced.

Then we tried the jQuery ImagesLoaded extension. There are two versions of this extension, the first is very simple jQuery code written by Paul Irish in 2010. The second is a much more complex version by David DeSandro that is still being maintained. Both of these versions work well to allow Animated Infinite Scroll and jQuery MatchHeight.js to work in concert.

If you're interested, the code used in the On Pagination End callback is:

  • 6shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn6
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....
We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.OkNoCookie policy