Develop Reference

Trigger click on embedded video when page loads

I have noticed there are a few questions that have been asked on the above topic, however, there hasn't been one for embedded videos. I was hoping someone would be able to help.
Note: My first post - so apologies if i haven't provided the appropriate information!
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".container-fluid").on('click','#issuuclick',function(){
alert("it's working")
})
});
</script>
<div data-configid="26360926/39969074" style="width:525px; height:373px;margin: 0 auto;" class="issuuembed" id="issuuclick"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the above is my html embedded and javascript code. The aim here is to automatically open the publication in full spread when the page loads but only the alert is popping up at the moment (I have used a timer).
Would appreciate some assistance!

Try
$(document).ready(function(){
$("#issuuclick").trigger("click");
});
//or
window.onload = function() {
$("#issuuclick").trigger("click");
};
The first example fires as soon as the document is ready to work with and the second example fires when the page is ready and ALL resources are loaded
And attach a click handler to "#issuuclick" like
$(document).on("click", "#issuuclick", function(){
// do something
});

How can I reliably run a jquery script after page load

I'm attempting to get some jquery code to run after a sharepoint page loads, the code being:
$(".ms-commentcollapse-icon").click();
I've been using the following to load the code after the page loads, but it does not seem to be very reliable (it will work sometimes and other times it wont):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
</script>
are there any other good methods for achieving this? I'm not sure what's going on, sharepoint could be at fault, but I figured I would try fiddling around with the script a bit more first.

You could use an auto-executing function:
<script type="text/javascript">
(function () {
$(".ms-commentcollapse-icon").click();
} ());
</script>

If this is SharePoint 2010 or above, you can use ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.JS") to keep your code from firing until after the SP.JS library has loaded (or you can put any other library in the second parameter for a similar effect).
If this is in a web part and you don't want it to execute until other web parts on the page are fully loaded, make sure the web part containing the script is below the other web parts.
As a last resort, you could execute it on a delay using setTimeout or setInterval, but that's ugly.

You can prevent the default behaviour by using e.preventDefault(); within the function.
<script type="text/javascript">
$(".ms-commentcollapse-icon").click(function(e) {
// We're going to stop the default behavior
e.preventDefault();
//some code here
});
</script>

What Could be Breaking scrollTo?

On this page:
http://alien.devprose.com/screenfad
I'm attempting to have it scroll to a specific position using javascript when the page is loaded. For example purposes I have this code in the head:
<script type="text/javascript">
window.scrollTo(300,300);
</script>
However, nothing is happening. Any ideas?

It appears that you have jQuery, so the code should be in $(document).ready() like so:
<script type="text/javascript">
$(document).ready(function() { window.scrollTo(300,300); });
</script>
This way, when the window is done loading it will scroll.

You can't call window.scrollTo() until after the document has loaded. Scripts in the HTML (including both in the head and in the body) are executed before that. This StackOverflow question should explain the best ways to run scripts after it's finished loading. In summary:
window.onload = function() { window.scrollTo(300,300); };

Unable to execute function after JSON loaded

This is the pen that shows that when a JSON request completes, a name 'Antonio' appears. But jQuery function is not executing on it. Please make sure that document.write is a necessary function for me.
This is the code I wrote to get the name Antonio.
<script type="text/javascript">
function gallery(json) {
document.write('<span>'+json.feed.title.$t+'</span>');
}
</script>
<script src='http://www.antonio-bloggerever.blogspot.com/feeds/posts/summary/-/Creative?max-results=2&alt=json-in-script&callback=gallery'/>

You don't have jQuery included. Add jQuery and it will work. Write this line in starting of your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

CodePen
You are essentially trying to bind a click event to an element that's not there yet.
For dynamically added elements to the DOM use on and off.
$('span').on('click', function(){
alert('aaaa');
});

hide before load completed -jquery

I have tried this code to hide the body, and show when is loaded in totality. But I noticed that is not working well, because when the fade occurs, some images are not yet loaded.
How I can do this effect?
<script type="text/javascript">
$(document).ready(function(){
$('.nav').fadeIn(700);
});
</script>
<body class="nav" style="display: none">

Surely it's as simple as:
$(window).load(function() {
$('.nav').fadeIn(700);
});

If you want to wait for the images (questionable idea, but it's your site) you can just handle the "load" event instead:
$(document).load(function() { $('.nav').fadeIn(700); });
I say that that's a questionable idea because it may take some time to get the images, and that may be confusing. However, I don't have any clue what your site looks like, of course, so perhaps it's fine.
Oh, also: if you're really just targetting the body element, then you can just use
$('body').fadeIn(700);
Not that it matters at all in this context, but that's going to be more efficient.