jQuery and javascript code on same page doesn't work

Question

I have a problem about jQuery and javascript code; when I write this jQuery below between </head> and <body>

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

and then write javascript code in body tag

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

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.

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

the partly code is on below :

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 = '<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>';
}

function start(){

    var canvas = document.getElementById("canvas");
    canvas.width = canvas.width;
    bubbles.move();
    bubbles.draw();
};

and I have a <div id="canvasBubbles"></div> indise html.

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

window.onload = function(event) {
    bubbleResize();
}

I wonder if someone can suggest a smarter solution to this? thank you.

@Blazemonger Or inside the ``, before the `` for unobtrusive script loading. — Fabrício Matté, Nov 16 '12 at 14:56
Also, we need some idea as to what `bubbles.js` is and what it does, before we can speculate as to why it's not running. — Blazemonger, Nov 16 '12 at 14:56
the Object constructor is completely unnecessary as you're using the object literal syntax inside of it. — Fabrício Matté, Nov 16 '12 at 14:58
Apart from the bad positioning of scripts, we will need more info to be able to provide a proper answer. Check your Console (F12 in Chrome/IE, for Firefox install Firebug then press 12). — Fabrício Matté, Nov 16 '12 at 15:01

score 1 · Answer 1 · edited May 23 '17 at 11:55

As stated in the other answers, the <script> tags should be the last thing before the </body> tag. See this question.

The problem with where you've put the tags is that the body of the HTML page hasn't loaded and is therefore not available for manipulation. The reason the window.onload and window.onresize work is because they are called later, when the body of the document is available for manipulation with JS.

Given the details provided in your question, you don't need the jQuery.noConflict() statement.

Here is an alternate version of your code that should do the same thing but with a bit more efficiency. Put it at the end of the body element, just before the </body> tag. I haven't tested it since I don't have all the scripts needed (bubbles, etc).

<!-- this goes at the end of your body element, just before the closing tag -->
<script type="text/javascript" src="bubbles.js"></script>
<script type="text/javascript">

    $.ready(function(){

        var canvasWrap,
            canvasElm,
            bubbles;

        init();

        setInterval(update, 1000/60);

        window.onresize = resize;

        $('#page_effect').fadeIn(3000);

        function init(){

            canvasWrap = document.getElementById("canvasBubbles");
            canvasElm = document.createElement('canvas');
            canvasElm.setAttribute('id', 'canvas');
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
            canvasWrap.appendChild(canvasElm);

            bubbles = new bubbleObject({
                type: 'linear',
                minSpeed: 100,
                maxSpeed: 400,
                minSize: 30,
                maxSize: 55,
                num: 100,
                colors: ['#FF0000','#FFFFFF','#FFCC99', '#FF33CC']
            });
            bubbles.createBubbles();
            update(); // you might not need this
        }

        function resize() {
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
        }

        function update(){
            // canvasElm.width = canvasElm.width; // is this a hack for something?
            bubbles.move();
            bubbles.draw();
        };

    });
</script>

score 0 · Answer 2 · answered Nov 16 '12 at 15:38

0

You can write all this inside <body>...</body> or inside <head> ... </head> NOT works between </body> and <head> tag (maybe works for some less formal browser like old IE).

answered Nov 16 '12 at 15:38

g.annunziata

3,118
1
24
25

score 0 · Answer 3 · answered Dec 06 '12 at 00:48

Script tags should always go at the bottom of the page directly before the tag unless the codes needs to be executed before then for some reason.

And as far as I know, the jQuery noConflict() method is only required when you are using two different libraries that both use the dollar sign, aka jQuery and MooTools, on the same page. You can use jQuery and vanilla javascript without having to use noConflict without any problems.

jQuery and javascript code on same page doesn't work

3 Answers3