Twine: loading jQuery without editing the HTML

Update: Twine 1.4 now lets you load jQuery via a StorySettings option, so this page is no longer necessary.

You can load jQuery into your Twine game via Google Hosted Libraries using this simple script code:

Obsolete script removed: use Twine 1.4

Change whatever you want the function passed to ready() to do.
Notes:
* Since Twine's engine uses '$' for something, jQuery must sadly relinquish that convenient abbreviation.
* Due to a minor bug, Twine's runtime currently doesn't work at all in IE 8 or below, so there's not much reason to use jQuery 1.9 over 2.0
* Using Google Hosted Libraries of course means that people can't play your game without a live internet connection - which, in the extremely rare chance you intend your Twine game to be available offline, should be borne in mind. Nevertheless, it can be more convenient for you, the author, due to not having to provide the jQuery file yourself.
Feel free to report any bugs to @webbedspace.

Comments

Healy's picture

Dude I know a guy who will

Dude I know a guy who will FLIP HIS LID if you don't offer some offline playable version of your game, so don't be so quick to disparage it.

The same fellow who said

The same fellow who said something to that effect about Howling Dogs in ifcomp?

Healy's picture

Yeah, this was the same guy.

Yeah, this was the same guy. He freaks out literally every single time something like that happens. It drove me up the wall during the IF Comp.

mcc's picture

undefined

This was SUPER USEFUL! Note though, it doesn't *exactly* work as written because if (whatevs) is not the correct way to test if "whatevs" is defined in Javascript (I think you say : "typeof whatevs != 'undefined'"). I got some assistance from #javascript freenode some and adjusted this slightly to this version which excises the timer (which was freaking me out anyway):

(function () {
// First load jquery
var s = document.createElement('script');
s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
s.onload = function f(){
jQuery.noConflict();
}
document.body.appendChild(s);

// DO STUFF
}());

I already made that change

I already made that change before you posted! Har har. (I wasn't sure if onload worked for script elements initially.)

Incidentally, ""typeof w != 'undefined'" is really just a more verbose form of "w!== undefined". Anyway, using "if (w)" doesn't make much difference, since if "w" is another falsy value (0, NaN, "") then the succeeding line of code will cause an error anyway.