We Keep Coding

How do I control timing of javascript execution in relation to other scripts loading dynamic content?

I've created a small piece of javascript to target some dynamically loaded HTML from a plugin script (YOTPO Reviews).
<script type="text/javascript">
if(window.location.hash) {
document.getElementsByClassName('write-review-wrapper')[0].style.display = "block";
}
</script>
I'm running into 'x is not defined' type errors and I assume this is because my script is running before the Yotpo widget script has finished loading the HTML I'm selecting?
I know I can execute the script after the DOM has loaded with the window.onload state and this works, however because I've got so many other scripts that are taking time to load in, such as live chat, tracking etc. It's too slow and what I'm trying to achieve becomes somewhat pointless.
The YOTPO script loads in an acceptable time, but how can I get my script to execute just after it's loaded (if that is indeed the issue here)?

how to animate slide in with jQuery without showing content before it's loaded?

In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated

Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.

<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>

This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.

Is it posible to now show loading when load addThis?

If the script tag is after addthis div. It slow down loading of the page, I don't care that it slow down, but I would like to now show that the page is sill loading (google chrome show load favicon). I removed the script tag and put it to $(funcion) in my external file where all my jQuery code is. But when script is loaded it still show loading favicon.
var src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=boobaloo';
$.getScript(src);
I also try to use
$('<script/>').attr('src', src).appendTo('head');
Is it posible to load addthis buttons and don't show that page is still loading? Can someone explain why it show that the page is loading?

Try to include "addthis" script in a separate function and call the function wherever you want. Also call the method using setTimeout. Eg:- setTimeout('AddthisMethod', 1000);

Reload embedded javascript in templates (Grails)

well I got a (jquery) javascript in .js loading inside a template in grails , the first time it loads in the template, and the script works perfectly, but once I hit the button to change the content in the template , the javascript doesn't reload, but once I embedded javascript directly in the template it loads fine, but once I put it back in a .js it doesn't load again. any suggestion?
it works this way:
<g:javascript>
code code
</g:javascript>
but doesn't work again if I use this:
<script src="${resource(dir:'js',file:'hoverInfo.js')}" type="text/javascript" charset="utf-8"></script>

once I hit the button to change the content in the template...
do you reload the full page or just a portion via remoteLink/ajax?
I guess in the second case, the browser notices that it already loaded the js-source and will not reload it - hence will not execute it a second time...
I guess you will have to use the onSuccess event to execute the script a second time...

Double check the location of the javascript source file, which can be different when loading the page. Therefore go in to the network tab of your firebug and check, whether the browser tells you 404, when pressing your ajax-button.

When do you choose to load your javascript at the bottom of the page instead of the top?

I have seen JavaScript libraries being loaded at the top and bottom of the page.
I would love to know when to make these choices. All the JavaScript code I've written all work at the top of the page, which includes jquery plugins.
When do i load my script at any of these positions?

Top: When having JavaScript events function on elements immediately is more important (so if you use a DOM Ready event to load everything, this is the wrong place)
Bottom: When loading the content is more important

Yahoo says to Put Scripts at the Bottom. Google says something similar but not as clearly.

The reason you do it at the bottom of the page is because if you put it at the top of your page then the rendering of your page will wait for these files before it renders. This is why a lot of people put JavaScript at the bottom of the page as it allows the entire page to be rendered then the JavaScript is loaded.
There's very rarely any reason you'd want to put the JavaScript at the top of the page, and unless you have an explicit reason you want the JavaScript loaded in before the main page then put it at the bottom. Most optimization guides suggest putting it at the bottom for this reason.

I place all CSS in the HEAD to avoid excessive screen paintings and flashes of style.
I place most JavaScript file requests at the bottom of the page so that the page can render quickly (HTML/CSS loading will block until script tags above them have been loaded and processed). Any code that needs to be executed after the library files have loaded are executed onDOMReady, which is all code except for library initialization. I pretty much followed Google's PageSpeed recommendations.
I've been thinking about using LABjs as well to further decrease page load times, but this works well enough right now.

When the browser encounters a script element it has to evalute the JavaScript contained in that element because the script might alter the content of the page (via document.write) or inspect the current state of the page.
If the script element loads script using the src attribute, loading of other resources (JavaScript, CSS, images, etc.) will be blocked until the current script is loaded.
Both of these factors can slow down the perceived load time of your page.
If your JavaScript does not alter the page or if it doesn't need to inspect the state of the page until it has loaded you can mark your script element with defer="defer" (supported by IE 6+ and Firefox 3.5+) which indicates that the evaluation of the script can happen "later". Moving your script elements to the bottom of the page effectively does the same thing - since your scripts appear at the end of the document they'll be evaluated after CSS, images, etc. are loaded and the HTML is rendered.

Because of the fact that browsers have to pause displaying content of a page when it's parsing a Javascript file, the recommendation is to load the Javascript at the bottom of the page to speed up displaying a page's content. This works best if your website can be rendered without any Javascript executing to modify the page because the page will be available for user interaction even if a script hangs for longer than expected.

I put all external scripts (such as Google analytics) at the bottom so their lag does not effect the loading of the DOM.

Simply put, if your script have snippets that would start executing right away (outside all function(){} bodies) and that access DOM elements, it should go at the end of the page so that DOM would have been built and be ready to be accessed by the time the script starts executing.
If you are accessing DOM only from function calls (like onload, onclick etc), you can put the script safely in the head section itself.

I put a small script in the head that does anything I want done before the rest of the page renders, and loads any other required scripts onload, or as needed after the document loads.