CUNY Academic Commons

Thanks, Luke. I've noticed similar issues (page elements loading before styles are applied -- I see this, for instance, on the Group Files pages) elsewhere on the Commons. Curious to hear Boone's take.

Hi Luke - Sorry you're experiencing trouble.

I've spent a while looking at this. Sliders generally work by loading all of the slides into the DOM, and then showing them one at a time, using JS to show/hide sections as relevant. In the case of Make, the slide markup is built in such a way that the slides are visible, and then they are hidden with JS. Because the relevant JS doesn't fire until the DOM is completely built (document.ready), there can be a slight flicker when the page is not loaded from your browser cache.

I assume that the logic behind this decision was that the slider will degrade "gracefully" when JavaScript is disabled. I put "gracefully" in scare quotes because the slides will, in fact, all appear at the same time, one over the other, so that you have to scroll way down to get to the rest of your page content. This is probably the safe route when building a theme for mass consumption - people may put critical site information in those slides, and it's critical that it's seen by those without JS - but in your case it doesn't make a ton of sense.

For your use case, a better solution is probably this: the first slide should be visible by default, while the rest should be hidden by default. The no-js fallback is that only a single slide is visible. I've implemented this right now on the Commons so that you can see what you think.

Even after this change, there was still a flicker, because the banner element doesn't have a height until the images inside of it have been fully loaded; this means that the paragraphs below ("Thank you for visiting the site...") would briefly show up a few hundred pixels higher than they ought to, before flowing into their proper position. Again, this is a byproduct of the fact that Make is a builder theme meant for general use: page sections need to have dynamic height, and need to flow organically. But since we know that your banner elements are always the same height, we can give the parent an explicit height so that the browser doesn't have to redraw after the banner images are loaded. I've added this bit (height: 415px) to your custom CSS https://tlc.commons.gc.cuny.edu/wp-admin/themes.php?page=custom-user-css%2Fcustom_user_css.php

With these two fixes, I'm no longer getting any flicker, but I've also reloaded the page about 600 times, so my eyes are a bit glazed over. Let me know if it's working for you.

I've put the fix into place, for tlc.commons.gc.cuny.edu only, in https://github.com/cuny-academic-commons/cac/commit/8050f655b606877688bd1cbdfae37b4dd976a453

Can you say a bit more about the no-js fallback you've implemented? Where on the Commons? I ask so that I can be on the lookout for unintended consequences outside of the Make banner/slider, if that's even a possibility.

The Make slider implementation builds markup like this in PHP:

<div class="slide-1" style="background-image:url('foo.jpg');">foo</div>
<div class="slide-2" style="background-image:url('bar.jpg');">bar</div>
<div class="slide-3" style="background-image:url('baz.jpg');">baz</div>

The three divs, with their background images, load into the DOM when the document is loaded. They are visible. When the document is ready, Make's JS hides all slides (display:none;visibility:hidden) and then shows the proper one (slide-1). (This delay is what caused the flicker.) Thus, if JS is not loaded, you'll see all three slides, one above the other.

My "fix" is to filter the markup so that it looks like this:

<div class="slide-1" style="background-image:url('foo.jpg');">foo</div>
<div class="slide-2" style="background-image:url('bar.jpg');display:none;visibility:hidden;">bar</div>
<div class="slide-3" style="background-image:url('baz.jpg');display:none;visibility:hidden;">baz</div>

If JS is disabled, only the first slide will ever show - there'll be no way to see the content on any other slides.