jQuery and javascript code on same page doesn't work
<p>I have a problem about jQuery and javascript code; when I write this jQuery below between <code>&lt;/head&gt;</code> and <code>&lt;body&gt;</code></p>

<pre><code>&lt;script type="text/javascript"&gt;
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('#page_effect').fadeIn(3000);
    });
&lt;/script&gt;
</code></pre>

<p>and then write javascript code in body tag</p>

<pre><code>&lt;script src="bubbles.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    bubblesMain(new Object({
        type : 'linear',
        minSpeed : 100,
        maxSpeed : 400,
        minSize : 30,
        maxSize : 55,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#FFCC99', '#FF33CC')
    }));
&lt;/script&gt;
</code></pre>

<p>then jQuery code can work , but javascript code doesn't work. Finally I found that  when I resize the browser after the first loading, it's OK to run. </p>

<p>the bubble.js is to automatically create a canvas element and then raises some bubbles with animation inside canvas.</p>

<p>the partly code is on below : </p>

<pre><code>function bubblesMain(obj){
    bubbleResize();
    bubbles = new bubbleObject(obj);
    bubbles.createBubbles();
    setInterval(start,1000/60);
};

//WHEN WINDOW HEIGHT IS CHANGED, REMAKE THE CANVAS ELEMENT
window.onresize = function(event) {
    bubbleResize();
}

function bubbleResize(){
    var height = parseInt(document.getElementById("canvasBubbles").clientHeight);
    var width = parseInt(document.getElementById("canvasBubbles").clientWidth);
    document.getElementById("canvasBubbles").innerHTML = '&lt;canvas id="canvas" width="'+width+'px" height="'+height+'px"&gt;&lt;/canvas&gt;';
}

function start(){

    var canvas = document.getElementById("canvas");
    canvas.width = canvas.width;
    bubbles.move();
    bubbles.draw();
};
</code></pre>

<p>and I have a <code>&lt;div id="canvasBubbles"&gt;&lt;/div&gt;</code> indise html.</p>

<p>Then after I added the following code into bubbles.js, It's work to run.</p>

<pre><code>window.onload = function(event) {
    bubbleResize();
}
</code></pre>

<p>I wonder if someone can suggest a smarter solution to this? thank you.</p>
