Geek Answers Handbook

JQuery and javascript code on same page not working

I have a problem with 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 may work, but javascript code doesn't work. Finally, I found that when I resize the browser after the first download, it works fine.

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

partially the code is 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 <div id="canvasBubbles"></div> indise html.

Then, after I added the following code to bubbles.js, it will work.

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

I wonder if anyone can suggest a more reasonable solution? thanks.

+6
source share
3 answers

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

The problem with tagging is that the body of the HTML page is not loaded and therefore not accessible for manipulation. The reason for window.onload and window.onresize is that they are called later when the document body is available for JS manipulation.

Given the details provided in your question, you do not need the jQuery.noConflict() operator.

Here is an alternate version of your code that should do the same, but with slightly more efficiency. Place it at the end of the body element immediately before the </body> . I have not tested it, since I do not have all the necessary scripts (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>
+1
source

You can write all this inside <body>...</body> or inside <head> ... </head> DOES NOT work between the </body> and <head> tags (it may work for some less formal browser, such as old IE).

0
source
Tags

Script should always be at the bottom of the page immediately before the tag, unless for some reason the codes should not be executed before.

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

0
source

More articles:


All Articles