Harvey JS With Dynamic Content

I’ve been a big fan of Harvey ever since I was first introduced to it about a year ago. If you’ve never used Harvey, it’s a great way to manage page elements on multiple different screen sizes when just simple media queries won’t do. I rely on it for a lot of the projects I build now (including this site!). Unfortunately, at work the other day I ran into an issue that Harvey didn’t handle so well, dynamic content.

The project in question was a responsive site that had a quiz that would present the user with the questions. When a question was answered, the next question would load via an AJAX call to the system backend. The questions were in a bunch of different formats; grids, text input, multiple choice and more. Harvey had been set up to have the questions display properly, but the triggers only fires when the window is resized to the specified size that has been set up when initializing Harvey.

Obviously the problem was clear, when the content was being dynamically inserted into the page it was setup as was intended on desktop. If the user was on tablet or mobile, then Harvey wasn’t triggering to move the elements around as they should have because Harvey’s “on” function wasn’t being triggered.

The problem was solved by taking a look at Harvey’s source. I noticed we could access the “states” that had been setup in Harvey when we defined our “on/off” functions. The states had been setup as an object and had an “active” property. I was able to loop through each of the states that had been setup and then manually trigger the “on” function of the state that was currently marked as “active”. It worked, and was a problem that Google couldn’t help me solve, so I’m hoping that it may help someone out there some day who runs into a similar issue if this gets indexed.

I’m not sure the solution was the most ideal, but there were only a couple of states setup in Harvey, so the looping really didn’t incur any noticeable performance hit, which I was quite pleased with. I would love to know if there is a better solution for more complicated sites, but for now this works just fine. I’d like to be able to give each state a unique ID and then be able to have a call in Harvey to trigger the function in a little easier fashion, heck, maybe I’ll fork the Harvey project on Github, if I can get some time and see if I can make that happen.