jQuery: trying to load jQuery dynamically. Not instantiating until after script has been run
<pre><code>javascript:var width=1900;
var height=800;

var jQueryScriptOutputted = false;
function initJQuery() {
    if (typeof(jQuery) == 'undefined') {
        if (! jQueryScriptOutputted) {
            jQueryScriptOutputted = true;
        var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    oHead.appendChild( oScript);
        }
        setTimeout("initJQuery()", 50);
    } else {
        $(function() { 
        });
    }

}
initJQuery();



var container=$("#foreplay-root");
var canvas=$("#foreplay-root canvas");
canvas.width(width);
canvas.height(height);
container.width(width);
container.height(height);
</code></pre>

<p>the above is a bookmark (hence the <code>javascript:</code> at the beginning).</p>

<p>but, in the console, it says $ is undefined. But when I type $ or jQuery into the console (webkit of course) I get f<code>unction (a,b){return new e.fn.init(a,b,h)}</code> which is correct.</p>

<p>So, I'm thinking there is something wrong with the time it takes to init jQuery from teh time it loads.</p>

<p>*NOTE: this is for angry birds. <a href="http://chrome.angrybirds.com/" rel="nofollow">http://chrome.angrybirds.com/</a></p>
