How to make script execution wait until jquery is loaded
<p>I am having a problem where the page is loading so fast, that jquery hasn't finished loading before it is being called by a subsequent script.  Is there a way to check for the existence of jquery and if it doesn't exist, wait for a moment and then try again?</p>

<hr>

<p>In response to the answers/comments below, I am posting some of the markup.</p>

<p>The situation... asp.net masterpage and childpage.</p>

<p>In the masterpage, I have a reference to jquery.
Then in the content page, I have a reference to the page-specific script.
When the page specific script is being loaded, it complains that "$ is undefined".</p>

<p>I put alerts at several points in the markup to see the order in which things were firing, and confirmed that it fires in this order:</p>

<ol>
<li>Master page header. </li>
<li>Child page content block 1 (located inside the
head of the masterpage, but after the masterpage scripts are
called). </li>
<li>Child page content block 2.</li>
</ol>

<p>Here is the markup at the top of the masterpage:</p>

<pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head id="Head1" runat="server"&gt;
    &lt;title&gt;Reporting Portal&lt;/title&gt;
    &lt;link href="~/Styles/site.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="~/Styles/red/red.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script type="text/Scripts" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; 
    &lt;script type="text/Scripts" language="javascript" src="../Scripts/jquery.dropdownPlain.js"&gt;&lt;/script&gt;
    &lt;script type="text/Scripts" language="javascript" src="../Scripts/facebox.js"&gt;&lt;/script&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
    &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
    &lt;/asp:ContentPlaceHolder&gt;
&lt;/head&gt;
</code></pre>

<p>Then in the body of the masterpage, there is an additional ContentPlaceHolder:</p>

<pre><code> &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                &lt;/asp:ContentPlaceHolder&gt;
</code></pre>

<p>In the child page, it looks like so:</p>

<pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Data.Dashboard" %&gt;
&lt;%@ Register src="../userControls/ucDropdownMenu.ascx" tagname="ucDropdownMenu" tagprefix="uc1" %&gt;
&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../Styles/paserMap.css" /&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
***CONTENT HERE***
    &lt;script src="../Scripts/Dashboard.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/asp:Content&gt;
</code></pre>

<p>Here is the content of the "../Script/Dashboard.js" file:</p>

<pre><code>    $(document).ready(function () {

    $('.tgl:first').show(); // Show the first div

    //Description: East panel parent tab navigation
    $('.tabNav label').click(function () {
        $('.tabNav li').removeClass('active')
        $(this).parent().addClass('active');

        var index = $(this).parent('li').index();
        var divToggle = $('.ui-layout-content').children('div.tgl');

        //hide all subToggle divs
        divToggle.hide();
        divToggle.eq(index).show();
    });

});
</code></pre>
