0

There are similar question titles on this site and I have read all of their solutions, but the problem was always related to Turbolinks or something additional. In this case, I'm using javascript/jQuery only, so those solutions are irrelevant.

I have written a simple script which finds the tallest container and then adjusts the rest of the containers in the block to be the same height as the tallest one. I applied this script to the Squarespace summary block so that all of the summary items in the same block are the same height.

I then added a conditional statement that would cause this functionality to be executed only at screen width of above 810px.

The outcome is that this script works exactly as it should but only when I get to the page directly or refresh the page. It does NOT work if I navigate to the page from another page. 

    $(function() {
     if($(window).width() > 810){
     var maxheight=-1;
     $('#block-yui_3_17_2_25_1494432854570_9795 .summary-excerpt').each(function() {
      if(maxheight < $(this).height())
      {
          maxheight = $(this).height();
      }
     });
     $('#block-yui_3_17_2_25_1494432854570_9795 .summary-excerpt').each(function() {
 $(this).height(maxheight);
     }); 
   }
});

Would really appreciate any ideas as I have looked into every question that was similar to mine and none of the solutions worked for me.

NOTE: I do not get an error. I placed an alert() right before the if statement and that confirmed that the function does not run when you navigate to the page from another page. I do, however, get an alert when I refresh the page, as expected.

user3384928
  • 31
  • 6
  • I think you need to define "does not work". Do you get an error? Have you tried placing a `console.log()` statement just before the `if` statement to see if, in fact, the function is being called? – Scott Marcus Jun 11 '17 at 00:57
  • I do not get an error. I placed an alert() right before the if statement and that confirmed that the function does not run when you navigate to the page from another page. I do, of course, get an alert when I refresh the page. – user3384928 Jun 11 '17 at 03:55

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: JavaScript only being called once in Squarespace

Brandon
  • 3,572
  • 2
  • 12
  • 27
  • Thanks so much Brandon, but I still haven't solved the problem. I tried using both window.Template.Constants.AJAXLOADER = false; and window.onload = function() { this.AjaxLoader.prototype.initializeSqsBlocks = function () { window.SQS.Lifecycle.init(); console.log( "Foo!" ); window.CUSTOM.YourCustomInitFunction(); } }; in the Header code injection, but it had no effect. =( – user3384928 Jun 11 '17 at 03:43
  • Did you try first disabling AJAX altogether to verify that it is the problem? And did you also try this: ```window.addEventListener("mercury:load", function(){ // do stuff });``` as suggested in the answer linked to? – Brandon Jun 11 '17 at 12:22
  • I finally found the option to disable AJAX loading in the style editor (it does not appear under "site:loading" like the instructions say) and now everything is working as it should. thanks so much. – user3384928 Jun 12 '17 at 23:31