Site content shifts vertically on certain pages - javascript

I'm in the process of building a new website for my wife's business, using Squarespace. Don't tell her, since it's one of her Christmas presents. :)
However, I'm experiencing a weird issue. About half of the pages on the site include content from a third-party widget called Healcode. Those pages have a strange jerkiness to them on pageload, where the logo and navbar move around -- ultimately winding up in the right spot, but looking bad while doing so. Pages that don't have a third-party widget don't have this jerkiness.
Example of page that jerks: https://coconditioning.squarespace.com/yoga-classes/
Example of page that doesn't jerk: https://coconditioning.squarespace.com/private-coaching/
The Healcode widget is javascript code that looks like this:
<script type="text/javascript">
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
Any help would be MUCH appreciated. Thank you in advance!

You could hide the page until the body loads:
<body style = 'display: none'; />
And in your javascript, adding window.onload():
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write( unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
window.onload = function()
{
document.body.style.display = 'block';
};
Also, is document.write() the best solution for you?

Don't try to use document.write if possible as with document.write JS parser doesn't know where to put it. at best, the browser will ignore it. at worst, it could write over the top of your current document. Use appendChild
function loadHealCodeScript () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.healcode.com/javascripts/hc_widget.js'
document.body.appendChild(script);
}
window.onload = loadHealCodeScript; // load healcode after page has been loaded
The jittering effect is happening because the healcode is loading its script before the page has completely loaded. If possible place all you javascripts after the body tag rather than head
As suggested by google also https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

Related

Trouble loading js

I'm sorry in advance if this is simple or if it just can't be done. Basically, I am trying to load an age verification js on my site, but I am trying to chose between different pages depending on the legal drinking age in different countries.
If I load the script simply, it works fine:
<script type="text/javascript" src="https://av.ageverify.co/jsfr/singlemalt.18.js"></script>
However, if I trying to do any sort of modification to this script, it won't load at all. For example, if I try to set the src to a variable (that I would call in a different script, it fails to load).
<script>
url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
</script>
<script type="text/javascript" src=url></script>
Any ideas would be greatly appreciated!
EDITED:
Additional info:
I tried to use getScript as people have suggested but also had issues with it:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
$.getScript("https://av.ageverify.co/jsfr/singlemalt.18.js");
</script>
or this method:
function loadJs() {
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
This last one seems to work with other simple scripts, but maybe this particular script is looking for some sort of browser condition? Any suggestions on how to figure that out or what to look for? There should be an age verification page that pops up, asking your age.
HTML tags do not understand variables. You need to use a URL for the src attribute. HTML has no idea what your JavaScript variables are.
If you want to load the .js file this way, you need to use JavaScript. What you can do is create a new <script> tag then append it to the page.
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
If you are using jQuery, this is basically what $.getScript does.
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
$.getScript(url);

Angular Data Binding Inside an Embed.ly Twitter Widget Not Working

Hi I'm trying to build something with angular where you can submit the url of a tweet and it will embed the tweet. I thought I could just stick the handlebars inside of embedly's twitter widget but it doesn't work. It's something maybe about the order in which the events are firing.
This is the code
<section data-ng-controller="ArticlesController">
{{article.title}}<p>
<a class="embedly-card" href="{{article.title}}">hi</a><p>
<a class="embedly-card" href="https://twitter.com/jashkenas/status/563803426107449347">bye</a>
<a class="embedly-card" ng-href="{{article.title}}">why</a>
</section>
And this is the result
As you can see I tried it a few different ways and it works when it just has the url pasted in there but not with the angular data. Although when you click on the hi and why links they do take you to the right place.
This is inspecting the page
The one that worked created this whole iframe but the others are just plain links.
Should also say theres an embedly script which I put in the header
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
Any help is much appreciated. I don't really know angular, I just wanted to play around and learn a bit about it. I guess maybe I am now. Thanks.
The problem you met is that embedly renders the element before Angular renders the DOM element, which means embedly may don't know what the href actually is and it stops rendering and left nothing.
You can refer to these projects 1 2 for how to handle rendering sequence.
so I ended up just delaying the embedly script loading with this js
setTimeout(function() {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);
}, 5000);
i found here https://stackoverflow.com/a/9611751/927591

slow / unresponsive / stuck typekit script

ive installed typekit on my site, the usual two lines of js just after the opening head tag but its extremely slow / unresponsive to load in the fonts, this is completly remedied by refreshing the page, after that the typekit font load in perfectly and really quickly. But from a users point of view they will never know to do that, so they will be served the default fonts.
I have the typekit js as the very first thing under the opening head tag before the metatags and before loading in jquery, jquery-ui and other scripts.
Has any one else had trouble with this ?
what seemed to work for me was to load the script in an asynchronous pattern - as specified on the typekit blog, ive copied it in bellow
Standard asynchronous pattern
This first pattern is the most basic. It’s based on patterns written about by web performance experts like Steve Souders and used in other JavaScript embed codes like Google Analytics.
<script type="text/javascript">
TypekitConfig = {
kitId: 'abc1def'
};
(function() {
var tk = document.createElement('script');
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
try { Typekit.load(TypekitConfig); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();
</script>
This pattern uses a single inline tag to dynamically add a new script element to the page, which loads the kit without blocking further rendering. An event listener is attached that calls Typekit.load() once the script has finished loading.
How to use it:
Place this snippet at the top of the so the download starts as soon as possible.
Edit the highlighted TypekitConfig object and replace the default with your own Kit ID.
You can add JavaScript font event callbacks to the TypekitConfig object.
Advantages:
Loads the kit asynchronously (doesn’t block further page rendering while it loads).
Disadvantages:
Adds more bytes to your html page than the standard Typekit embed code.
Causes an initial FOUT in all browsers that can’t be controlled or hidden with font events.

Delaying the loading onset of elements

I have a webpage that is rich in content such as graphics and javascript. Now the problem is that my page loads too slow, especially with slower internet connections. Now at the bottom of my webpage I have a jquery slider, which is the least important item on my website.
now...
Is there a way I can postpone or delay the loading of that whole slider(which has a div ID as parent element) until directly after everything else has loaded on my page, and not alongside the rest of the more important content?
Absolutely, you might want to look up javascript loader like RequireJS or LABjs.
The principle is that you inject the script-tag that loads your javascript. For instance, you could have the following code as the last element before your </body>-tag:
<script type='text/javascript'>
var head = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'url/to/script.js';
head.appendChild(newScript);
</script>

How do you detach your pageload from third party scripts?

I have this problem where the UI components of my page like the drop down menus arent available until thirdparty scripts finish loading. This causes a problem because who knows whats going on on those servers. I need to detach the availability of the page's interactive components from the loading of thirdparty stuff...
how?
=/
Try something like this:
<script type="text/javascript">
window.onload = function() {
var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
var head = document.getElementsByTagName('head')[0];
for(var i = 0; i < scripts.length; ++i) {
var scriptTag = document.createElement('script');
scriptTag.src = scripts[i];
head.appendChild(scriptTag);
}
}
</script>
This will load in your external script files after the page has finished loading in the client's browser. Your form UI elements should all be available.
If you're using jQuery, you can do this:
<script type="text/javascript">
jQuery(function($){
var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
$.each(scripts, function(i,scrurl) {
$('head').append($('<script>', { src: scrurl }));
}
});
</script>
You should carefully think your page so that it is nicely degradable.
Make the menu available in some "bare" form before the JS are loaded and once they are you can then change the UI to be superfancy and full of bells and whistles :)
That will also be useful for those users (probably not many, but still...) who have JS turned off, and for indexing spiders to catch the content of your menus.
JS performance guru Steve Souders on JavaScript blocking and asynchronous loading gives a good overview. Google "asynchronous javascript loading" for a lot more information. There are libraries that can schedule and load external files too. Another.

Categories

Resources