Download the appropriate files
elementals.js - 22.52k - Core Library
Just the library itself in a fully formatted source.
elementals.min.js - 16.02k - Core Library Minified
The same library whitespace stripped to save a handful of bytes. This is the version most people are likely to deploy.
Adding elementals.js to eixisting code
It is required that you place all scripts involving elementals.js at the end of your markup right before your
</body>, with elementals.js as the first of them. This will help it load quicker as for some bizarre reason scripts loaded inside
BODY after all other DOM elements seems to load faster... as well as hopefully break developers of the ugly habit of inlining script in the middle of the markup.
The include for elementals.js should look something like this:
Or for the minified version:
Once elementals.js has loaded, it will add a class "elementals" to body. This is mostly so that if your routines use any custom CSS that should only be applied if elementals.js is running, you have a handy hook to do so with.
Loading right before
</body> has the added advantage that if all scripts are after 'content bearing' elements, the full DOM has effectively been build allowing you to target elements on the page at will for changes without wasting extra code to wait for the Window.onload or
DOMDocumentReady events to fire.
Alternate Methods of Use
In my own projects I like to put any code I want run before style is appled and/or that's going to manipulate the DOM inside the self-calling function at the end of elementals.js. In those cases I rename it library.js for deployment.
The primary reasons for this are twofold:
First, it lets me prevent scripts from colliding since my 'unique' stuff is in that function is 'invisible' to the rest of scripting.
Second, the less separate files you have, the less handshakes to the server and the faster the pageload.