Parallax, Javascript, and Read Mores

• I placed some code to get Read More expansions on http://creatrixtiara.com/what-i-do-1/#techdigital, 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 http://creatrixtiara.com/who-i-am/, 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.

• Answer:

  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().