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.

your <script> tags should ALWAYS go before the </head>, not after it. — Blazemonger
– Blazemonger, Commented Nov 16, 2012 at 14:55
@Blazemonger Or inside the <body>, before the </body> for unobtrusive script loading. — Fabrício Matté
– Fabrício Matté, Commented Nov 16, 2012 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
– Blazemonger, Commented Nov 16, 2012 at 14:56
the Object constructor is completely unnecessary as you're using the object literal syntax inside of it. — Fabrício Matté
– Fabrício Matté, Commented Nov 16, 2012 at 14:58

Community · Accepted Answer · 2017-05-23 11:55:58Z

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>

g.annunziata · Accepted Answer · 2012-11-16 15:38:36Z

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, 2012 at 15:38

g.annunziata

3,3061 gold badge26 silver badges27 bronze badges

Comments

Jeremy Gehrs · Accepted Answer · 2012-12-06 00:48:08Z

0

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.

answered Dec 6, 2012 at 0:48

Jeremy Gehrs

4336 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery and javascript code on same page doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related