Load a JavaScript function after everything else
<p>I want a JavaScript function to be called after everything else (other JavaScript functions and CSS) runs. This function changes the CSS of the slideshow I'm creating. </p>

<p>I have added the function to my HTML file:</p>

<pre><code>function loadFullSlideShow {    
  alert('If I remove this alert this would not work');
  $('#background').width('100%');
  $('#background').height("auto");
  $('#slide_area').width('100%');
  // alert('This alert ensure application of CSS with code below');
  $('#slide_area').height("auto");
  $('img').width('98%');
  $('img').height('auto');
  $('#thumb_container').width('100%');
  $('#thumb_container').height('auto');
  $('#controls').css('top', $('img').height());
  $('#caption_credit_footer').css('top', ($('img').height() + 18));
});
</code></pre>

<p>I want this function to be called after all other scripts have done loading. Surprisingly, when I make a call to the <code>alert</code> in the first line of the code, and click <code>OK</code> on the alert box, the changes in the CSS are being applied. However, when I remove the alert, the changes aren't being applied. </p>

<p>I suspect that when I remove the <code>alert</code> the code is executed before some of the other JavaScript code. How can I ensure that this code runs at the very end of the page load?</p>

<p>I've tried calling this function in many ways:</p>

<ol>
<li><code>$(window).bind("load", function() { loadFullSlideShow() });</code></li>
<li><code>$(window).on("load", function() { loadFullSlideShow() });</code></li>
<li><code>window.load(function() { loadFullSlideShow()});</code></li>
<li><code>$(function() { loadFullSlideShow() });</code></li>
<li>I also tried binding this in <code>&lt;script type="text/javascript" defer="defer"&gt;&lt;/script&gt;</code>.</li>
</ol>

<p><strong>Edit:</strong> I am using <a href="http://www.jplayer.org" rel="nofollow">jPlayer Plugin</a> for jQuery JavaScript Library.</p>
