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.
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.
Related
I am responsible for maintaining 2 websites. One is a Wordpress website that is just a list of events using Time.ly's All in One Event Calendar plugin. The other is a conventional built from scratch website using html.
The html website has had code that embedded the Wordpress calendar feed into it for several years, and it's always worked fine and I haven't had to do anything with it. Recently, it just stopped working. The calendar feed is just gone with no errors returned, no problems loading the site or anything. It looks as if somebody just deleted the code for it. However, the code is still there and is as follows:
<script class="ai1ec-widget-placeholder" data-widget="ai1ec_superwidget" data-action="stream" data-tag_ids="45">
(function(){var d=document,s=d.createElement('script'),
i='ai1ec-script';if(d.getElementById(i))return;s.async=1;
s.id=i;s.src='http://www.texascitycommunitycalendar.com/?ai1ec_js_widget';
d.getElementsByTagName('head')[0].appendChild(s);})();
</script>
Can anybody identify any obvious reason that that might have just stopped working?
I don't see a reason for that very last () pair in the script tag (just before the semicolon that is followed by the closing </script>tag. Try to erase it.
The issues is with existing ASP.NET MVC 4 project. The View itself is not that big but there are also several service calls and what happens is that people with slow internet connection reports that for some period of time when they request the page it stay unresponsive, so they don't know if the content is loading or something went wrong.
So in general, what I need is a way to show a loading image as the very first thing from this page (or at least fast enough) so even if it takes some time for the browser to download the full content, at least the user will know that something is going on.
However it seems that this is not as trivial as it sounds. I came up with two ideas, one was already proven to not work in all cases and the second is also something that many people doesn't recommend.
What I've tried was to use pure JavaScript in the <head> tag like so:
<html>
<head>
<script>
document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>");
</script>
</head>
Of course the styling is just to get the idea. This seemed like it was working until recently when on a minor build of IE 11 the page broke which after some investigation was proven to be due to the usage of document.write() inside the <head> tag. Even though this seems to work on most browsers and versions the fact that it's a potential danger requires a change in the approach.
The second idea is pretty similar to this, again - writing directly in the <head> tag but this time instead of using document.write() just putting the html markup directly there. From what I've read this is also a recipe for disaster so I don't even want to try it, but those are the two ideas that I could came up with. Everything else just doesn't work for slow internet connections since the mainstream solutions relays on the fact that some part of the DOM is already loaded so you can use it to apply behaviour/style.
I hope I'm not the first one that got this problem so I would appreciate any suggestion on how to solve this issue. Since I am using ASP.NET MVC 4 there was an idea to use a dedicated controller with view which to get called first just for the sake of showing the loading image and then moving to the requested view. Even though this idea seems interesting I didn't have the time to think it over, it also sounds a pretty complicated, but anyways, all help will be appreciated.
When faced with the same issue, we did as you mentioned: Load a super-light-weight page first with a tiny loading icon & "Loading..." text, then called back to the server to pull down the heavy content in chunks using ajax.
If you content is really heavy, it's also worth mentioning that you need make sure you have gzip compression turned on at your web server layer also.
Don't block the rendering of the DOM. Load the page and call your scripts right before the closing body tag and attach to an event like DOMContentLoaded or window.load (if you're using jQuery, that would be $(document).ready). In other words, you should allow the page to load completely, even if it's empty, before running any of your JavaScript.
Then, don't worry about writing the "Loading" div dynamically. Just include it in the rendered HTML and hide it initially. The first thing your JavaScript will do, before issuing any AJAX calls, is to show this "Loading" div.
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
it's not the first time that I'm restyilin' my website and there's always this problem: when I analyze the page with the Google PageSpeed, it suggests me to put the Jquery and a few other .js codes at the bottom of the page to increase the loading speed.
The problem is that most of the time when I do that the slider, in this specific case, do not work.
Is there an easy solution for this?
I already minified and included the jquery on my wesbite as (jqu.js)
It's not always the case that jQuery can be loaded in the footer of the page. PageSpeed Insights does not catch the cases when this occurs, and thus will always give you a penalty. I'm familiar with this happening with various Carousel-type Javascript UI elements; it sounds like your slider is affected too.
I am wondering if anyone can point me in the direction of learning how to update the page html and url without refreshing the page.
Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing.
Here is an example site using that effect.
http://onedesigncompany.com/
Notice the actual html is update when the section is changed as well as the url while maintaining a smooth transition with no visible page refresh. The site also works properly without javascript.
Also if anyone sees any downside to using this approach I am all ears.
If you need to re-load a portion of a page, without reloading the entire page, I would highly recommend using jQuery.Load():
http://api.jquery.com/load/
With jQuery.load() you can select a div and reload content into it from another webpage. For example:
$(".myDiv").load("/myOtherwebpage.html");
You can also specify content from a particular element on that other page:
$(".myDiv").load("/myOtherwebpage.html .myOtherClass");
However, if you need to reload all the content from another page, and change the URL to a different page, then I would just recommend linking to that page. Theres no performance benefit from doing this through jQuery.
There is, and it's called PushState.
It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. Basicly it alters the adressbar through javascript.
I might seem as nothing but it's really neat! Usually you'd do this through the hash www.example.com#/contact for example.
The latest project that I've used this technology I've used a js plugin called History.js whcih can determine if your browser supports PushState or not.
Depending on this I either bind an event to relevant links which does a pushstate and some ajax instead of loading the new site, or let the <a href=""> act normally.
That makes all browsers rather happy.
Basicly my script creates the same result with refresh as with pushstate and ajax.
EDIT:
Just a side note on that example of yours. It's quite smartly made :)
It loads new pages through ajax and gets it's HTML, but if you browse that page again it redisplay the fetched results so no unneeded ajax calls are being made.