Delete Icon
This forum is now read-only. Please use our new forums at
0 points
Submitted by Maciej Wiercioch
6 years ago

Bouncing bubbles does not work from my hard drive / offline

This problem is caused by external files, your browser can not use them in offline mode which is used when you are opening html file from your hard drive. To fix that you have to download all external files:

and put them in same directory as your main.js and html files are placed. You can call them: jquery.js, alphabet.js and bubbles.js.

Last step is changing links in your html file from absolute links to relational links in this way:

  • <script type="text/javascript" src=""></script> into <script type="text/javascript" src="jquery.js"></script>
  • <script type="text/javascript" src=""></script> into <script type="text/javascript" src="alphabet.js"></script>
  • <script type="text/javascript" src=""></script> into <script type="text/javascript" src="bubbles.js"></script>

Return to Frequently Asked Questions

Answer 53647987548c3535bc001211

2 votes


Thanks for this guys!!! :)

160 points
Submitted by Kohei
6 years ago


Maciej Wiercioch 6 years ago

I’m happy that you like it! =)

Tobias Páez 6 years ago

now it works perfectly, many thanks Maciej W. I was breaking my mind, but you found the solution easily, thanks again from Southamerica

Maciej Wiercioch 6 years ago

You’re very welcome :) Thank you for kind words, best regards from rainy Poland!

joshywatter 5 years ago

this finnaly worked after i did what u said! thanks!!!!

Safety_Coder 5 years ago

Thanks Maciej! I was having problems with this as well. Greetings from Bulgaria!

Maciej Wiercioch 5 years ago

You’re very welcome! Glad it’s helpful :)

Answer 53d2c63d8c1cccf292000159

1 vote


thank you saved me :) cheers.

54 points
Submitted by Krishna Kishore
6 years ago


Maciej Wiercioch 6 years ago

I am glad that this is helpful =) You’re welcome

Answer 556d0cb4d3292f373f000016

1 vote


Excellent thanks. I just made my first ever webpage on my own domain and I used this code to make it, and it works. Keep it up.

41 points
Submitted by Gianluca Formica
5 years ago

Answer 5382a73d52f8638e490073ed

0 votes


Not an ‘answer’ but a comment… Any other steps that a newbie might miss? @Maciej Wiercioch

  1. I first saved the pages that came up and entered the code as suggested. I suspect this did not create proper .js files, so when that didn’t work, I :

  2. copied/ pasted the text of the pages above into separate TextEdit files, and named them as suggested (Actually, I initially named them with a ‘BA’ in front of them for ‘Bubbles Animation’ - but when that didn’t work I removed it, just in case javascript only recognizes specific descriptors… did not make a difference).

  3. When that didn’t work, I found out that I needed to make sure that the TextEdit files were really plain text files, so I changed them all to plaintext, still with .js, still named as above. Still no go.

  4. So far, when I save the file and attempt to load it in a browser, it just shows the text of that html file.

  5. Here is what I have saved as an .html document in TextEdit:

<!DOCTYPE html>     
<html>    <head> <script type="text/javascript" src="jquery.js"></script>"
<script type="text/javascript" src="alphabet.js"></script> 
</head> <body> <canvas id="myCanvas"></canvas> 
<script type="text/javascript" src="bubbles.js"></script> 
<script type="text/javascript" scr="main.js" </body> 

Heck. At least, I have copied and pasted it, but it does not show up in the preview… Anything specific I should change? My assumption about files being in the same directory = that if they are saved to the same folder, they will be found by the computer (?) That is the only thing that comes to mind as a next step when reading the above info. Thank you!

133 points
Submitted by dylanmac
6 years ago


Judy 6 years ago

Hi Dylan, I’m jus trying to reproduce what you are doing there. If your HTML document is called index.html, when you view it in your web browser, does the URL look something like this: file:///where/you/keep/your/files/index.html

dylanmac 6 years ago

Hi (Albion? ;)
Thanks for getting back to me! Yes, exactly: file:///Users/MKM/Documents/CodeAcademy/Bubbles%20Animation%20JavaScript/index.html

Judy 6 years ago

Could you right click on your index.html file and “Get Info”. Check to make sure that you see: “Kind: HTML document”

dylanmac 6 years ago

Yes, it confirms that it is an html document.

Maciej Wiercioch 6 years ago

Hello Dylan. I am really sorry, I missed notification about your post. I know that this is unusual request, but please, send your project files to me ( I will take a look and tell you what is wrong. I do not own any machine with OS X and I believe that this is somehow caused by TextEdit. There is one thing you can check before sending these files to me. In TextEdit go to preferences. In ‘Format’ section check ‘Plain text’ (or something like that). Now go to the second tab (‘Open and Save’) and try to find checkbox with label ‘Ignore rich text commands in HTML pages’. Select it.

From what I know, TextEdit is not a best solution for coding (even at novice level). Maybe you should try TextWrangler?

Anselmo Gabriel 6 years ago

Hi there. When I opened the links of all the external files. I was like unstructured and really too many characters encoded. So as you’ve suggested, I copied/pasted all three and saved it in the same folder where the index.html and main.js are saved. I also replaced the “src” with their filenames instead of the links just like what you suggested. but still, there are no previews. can you help me out?

Ahirini Deb 5 years ago

I am facing the same issue. I copy-pasted the code here into index.html and main.js in the folder, and yet all I see is a blank index.html page.

Safety_Coder 5 years ago

Read what Maciej wrote in the yellow box above!

Also when working and saving your .js and html files use Dreamweaver or Notepad++, and not any text edit program like Word or TextEdit (Mac OS). The text edit programs ad extra junk to your files and causing errors in your files.

BIG THANKS to Maciej again! :)