Parallax, Javascript, and Read Mores

May 3, 2015 12:18 PM

I placed some code to get Read More expansions on a page on my site, and it's conflicting with the parallax layout. It seems to work on Firefox, mobile, and when you change the window size, but on a fullscreen desktop it doesn't work so well.

The website is hosted on SquareSpace, using the Adversary template, which allows for parallax layouts. The ideal case is this page, where everything works as intended.

Yet when you go to the affected page, the pictures don't all load where they're supposed to load, unless you Read More everything. Viewing the site on mobile, changing the window size, or (strangely) viewing it on Firefox for Mac works fine.

It seems that the page isn't recalculating parallax sizes on fullscreen desktop for some reason.

The Read More expansion was a separate snippet of code, applied to H4s in Markdown blocks. I only ever use H4s for these. Here's the snippet of code:


$(document).ready(function(){
$('.markdown-block .sqs-block-content h4').css('cursor','pointer');
$(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
$(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
});


I can't really change the code directly, but I can add code snippets to it, like the above. I'm squinting at the source code but can't seem to figure out which piece of code manipulates the parallax effect.

How do I adjust the Read More code to make them compatible with the parallax layout? I would really like both there, though I would slightly prioritize the Read Mores only because that's a lot of text otherwise.

posted by divabat to Computers & Internet (17 answers total)

There's nothing in that code snippet that has to do with the parallex effect specifically. Basically it looks like the parallax script does some setup on the page as soon as it's ready, then your other script is changing things around more or less at the same time, so it ends up broken. When you resize the window, that triggers event listeners in the parallax script that set things right again. It's not surprising that it plays out differently on different browsers.

I'd have to see the unminified code to be able to say if there's anything simple you can do to fix the conflict, but there may not be.
posted by ludwig_van at 1:09 PM on May 3, 2015

Ooh no I might have it.

Can you add this:

$(window).load(function () {
   Site.syncUI();
});

posted by ludwig_van at 1:16 PM on May 3, 2015

Response by poster: That didn't work. Here's the specific JScript that deals with parallaxing.
posted by divabat at 1:35 PM on May 3, 2015

Response by poster: Failing that, is there another way to achieve the Read More effect without breaking the parallax code?
posted by divabat at 1:36 PM on May 3, 2015

Response by poster: That...sort of worked. Now the site breaks when I press "Read more" -_-
posted by divabat at 2:02 PM on May 3, 2015

Yeah, that's what I was looking at. That code is minified -- I'd need the unminified code to be more helpful.

I see what you mean, I didn't try clicking the links before. The two scripts just seem to break each other. I tried adding a click handler to the "Read More"s that would call the setup methods again, but that didn't seem to work entirely.
posted by ludwig_van at 2:18 PM on May 3, 2015

Response by poster: I turned off parallaxing, and even with (or without) the extra code it doesn't work.

Here's the unminified version of the JS file.
posted by divabat at 9:37 PM on May 3, 2015

That's not really unminified, it's just a reformatted version of the minified version. (Minification changes variable names to single characters, which makes it much harder to parse what's going on.)

What's probably happening is the parallax script doesn't see the page's content because it's hidden when it "looks" for it. (I'm assuming your jQuery "ready()" handler is firing before the parallax script's "domready" handler).

The parallax script has a "ready()" function that sets this up (lines 59-61 on that pastebin) that doesn't seem to be invoked in the script. Are you calling this from your own script? If so, what might work is removing that and manually initializing the parallax plugin after the "Read More" animation completes. Like this:

$(".markdown-block .sqs-block-content h4").click(function() {
    $(this).nextUntil("h4").slideToggle(function() {
        window.Site.initialize();
    });
});

Note that this could cause problems if this is content that can be re-hidden (because the parallax script will probably re-bind a bunch of handlers every time it's triggered, and this will probably cause problems), but if it's a one-time reveal action it should be ok. Actually, you should probably be using $.slideDown() instead of $.slideToggle().
posted by neckro23 at 8:19 AM on May 4, 2015 [1 favorite]

Derp, morning brain. Using $.slideDown() won't stop the event from triggering more than once. So, you want something like this instead:

$(".markdown-block .sqs-block-content h4").once("click", function() {
    $(this).nextUntil("h4").slideToggle(function() {
        window.Site.initialize();
    });
});

posted by neckro23 at 8:22 AM on May 4, 2015 [1 favorite]

Response by poster: neckro23: that does absolutely nothing.

I can't take out code from the Javascript, I can only add to it.
posted by divabat at 12:27 PM on May 4, 2015

Response by poster: (from the central JS file I just linked to, I mean - I only have the snippets I shared as injections. If it helps, they're based on jQuery.)
posted by divabat at 12:28 PM on May 4, 2015

Response by poster: Actually, scratch "absolutely nothing" - when I added it to the code block (as opposed to replacing the last line of the code block with it), I had the same problem as ludwig_van's code - it works UNTIL you press Read More.
posted by divabat at 12:36 PM on May 4, 2015

I think neckro meant .one rather than .once. But this is a pretty tricky issue to debug remotely, without unminified source, by just adding more code. I'd probably look for some hands-on help or a different solution.
posted by ludwig_van at 12:42 PM on May 4, 2015

Response by poster: Blah, .one didn't work either.

I wonder if the fact that this is an index page helps matters.

Hands-on help is tricky to find (people either don't know enough to be helpful or are judging me for not coding my own site myself), so I've opened up a support ticket.

I am down for alternative solutions. The CSS ones seem tricky though - I tried this one and it just broke everything.
posted by divabat at 12:52 PM on May 4, 2015

Response by poster: ALTERNATIVE SOLUTION:

Put all the information into one page (rather than as subpages for an index page) and work the Read Mores there, like so.

I lose a little of the parallaxing and it ends up looking a bit distinct from the other sections, but hopefully that doesn't annoy anyone too much.
posted by divabat at 1:48 PM on May 4, 2015

Sorry, I didn't look too hard at the page when I posted my earlier answer. I thought there was just a single "Read more". And yes, I meant "one()"... I've been using other libraries too much. Just ignore my earlier answer, it seems I was being totally wrong.

Looking again at the parallax script, it seems to monitor for page changes (using a MutationObserver) and adjust itself accordingly. So, new theory: It's not noticing the page has changed because jQuery is only changing CSS properties, not anything in the DOM.

Running window.site.syncUI() in the jQuery.slideToggle handler (instead of initialize) is something else to try.
posted by neckro23 at 2:03 PM on May 4, 2015 [1 favorite]

Response by poster: Nope, didn't work, either permutation (as a code replacement or at the end of the code block).

Since SquareSpace Support isn't helpful (basically: since it's custom code they can't do a thing about it) I'm just going to call it a night and just go with the alternative solution. It'll mean more work (mostly with images), but at this point it's just going to be too much of a pain in the ass.
posted by divabat at 11:39 PM on May 4, 2015