This forum is now read-only. Please use our new forums at

Animate Your Name Forum

View Course

2375 points
Submitted by
Maciej Wiercioch
about 3 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

2 votes


Thanks for this guys!!! :)

160 points
Submitted by
about 3 years ago


571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

I'm happy that you like it! =)

543fc82f631fe988640020d7_382532424 Tobias Páez almost 3 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

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

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

15c0e2654711c6352cb317a4a902a5fe?s=140&d=retro joshywatter almost 2 years ago

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

544fadcda13990a34ed282ac87f497c2?s=140&d=retro Safety_Coder almost 2 years ago

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

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 2 years ago

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

1 vote


thank you saved me :)

54 points
Submitted by
Krishna Kishore
almost 3 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

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

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
about 2 years ago

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
about 3 years ago


55df2afa95e3787b9200005e_359368177 Judy about 3 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

52786dea80ff3328ed005122_670900974 dylanmac about 3 years ago

Hi (Albion? ;)

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

55df2afa95e3787b9200005e_359368177 Judy about 3 years ago

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

52786dea80ff3328ed005122_670900974 dylanmac about 3 years ago

Yes, it confirms that it is an html document.

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 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?

7b350f201ff43f9cf5c0e18c732767ae?s=140&d=retro AJGabriel over 2 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?

4d054e754cfdff326485b2e3efe0cb22?s=140&d=retro Ahirini Deb about 2 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.

544fadcda13990a34ed282ac87f497c2?s=140&d=retro Safety_Coder almost 2 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! :)