Uncaught ReferenceError: $ is not defined

Question

I'm using LESS.js, Jquery, Respond.js, and Freetile.js.

I load them all using Head.JS (a first for me).

Could someone check out why I am getting this error? I've looked with Chrome developer tools, and all of the scripts seem to have loaded fine (I know this is usually an error with Jquery not being loaded, or Jquery being loaded after use).

I'm really banging my head against a wall on this one, so help would be greatly appreciated.

You can find the demo site I'm working on here: ----

Answer 1

Access $ after jQuery is loaded:

head.js(
     "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",
     "assets/js/less.js",
     "assets/js/respond.min.js",
     "assets/js/jquery.freetile.min.js", function() {
    $('#container').freetile();
});

Actually the head.js docs recommend this:

// use jQuery on the body of the page even though it is not included yet
head.ready(function() {
   $('#container').freetile();
});

// load jQuery whenever you wish bottom of the page
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",
     "assets/js/less.js",
     "assets/js/respond.min.js",
     "assets/js/jquery.freetile.min.js");