Code only works on jsfiddle

Question

In this question I asked, how I can generate shades of one color responsive to the number of div's. @DonJuwe came up with a perfectly working solution and demo: http://jsbin.com/xakifequ/1/edit

However when I'm trying to use the code from the jsfiddle or JSBin it just doesn't work. So I downloaded the source code from JSBin, opened the .html-file and what I got was this:

Can someone please explain me, why this happens?

Answer 1

As per snapshot, You are using

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

Replace it with

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>

You are using protocol less Urls, i.e. //code.jquery.com/jquery-1.9.1.js, When you open a your html file like file:// then jQuery is not loaded thus desired result is not achieved.

However, if you test your html file like http://localhost/yourfile.html you will get the desired result.

Note: Use // instead of http:// when you want to inherit the protocol from the page

Answer 2

you missed http: in the jQuery source link. if you using online resource you should follow the url's protocol. Other wise browser will search it from local. in this way you just confused your browser... So only it happens... :D

you should use...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>

instead of

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>