2

I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.

This is in the header (set in the header for that particular blog):

<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>

Then I think I need to call this function at the end of the page - I've put it in the footer:

scratchblocks.renderMatching('pre.blocks');

NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.

Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.] [http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2

Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it. https://codeclubprojects.org/en-GB/scratch/memory/

I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.

Any help would be greatly appreciated.

tjvr
  • 17,431
  • 6
  • 25
  • 26
Glenn Broadway
  • 23
  • 5
  • That codeclubprojects you linked to looks like its using the Flash-based Scratch 2.0, not the Scratch-Blocks (future Scratch 3.0) library you're interested in. – Anm Jul 21 '17 at 16:10
  • Thanks for updating my question Anm. I'm not sure what you mean by your comment. Scratchblocks is referring to the tool for rendering the code snippets in the main body of the page - not the version of Scratch running the embedded game (which is Scratch 2, using Flash). Scratch 3 is still in Beta isn't? – Glenn Broadway Jul 22 '17 at 21:14
  • Scratch 2.0 is based on Flash, and this is what I see on codeclubprojects. Scratch-Blocks is the code renderer for the upcoming Scratch 3.0 (yes, still in development) based on Blockly and uses no Flash. Scratch-Blocks is not what you see when you go to Scratch today. (Source: I'm a Blockly developer who works with the Scratch team.) – Anm Jul 24 '17 at 01:40
  • @Anm `scratch-blocks` != `scratchblocks`. Source: scratchblocks developer :-) [The name of MIT’s new project `scratch-blocks` is confusing!] – tjvr Oct 27 '17 at 19:09

1 Answers1

1

In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:

window.addEventListener("mercury:load", function(){
   // do stuff
});

In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.

Brandon
  • 3,572
  • 2
  • 12
  • 27
  • Thanks, switching off AJAX loading did the trick. I did already have my final bit of Javascript in the footer, so that's good. I really appreciate your help. – Glenn Broadway Jun 15 '17 at 21:26