Elementals.js

Latest Version: 3.7 Final 20 December 2018

Getting Started

Adding the Elementals library to a site is fairly simple, though using it to do anything is somewhat more complex as it requires a knowledge of JavaScript to even get started. We do NOT encourage trying to use ANY JavaScript library or framework until you have a full and proper command of the parent language FIRST!

Download the appropriate files

elementals_3_7_final.zip - 896.48k - Complete with Demos

* RECOMMENDED * This contains the next two files with the source for all the examples on this site. Most of these examples are suitable for deployment on websites providing many of the same bits of functionality much larger framework extensions do, in a fraction the code.
See the downloads sidebar if you require a tarball.

elementals_3_7_final.js - 54.84k - Core Library

Just the library itself in a fully formatted source.

elementals_3_7_final.min.js - 25.23k - 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 existing 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:

<script src="scripts/elementals.js"></script>

Or for the minified version:

<script src="scripts/elementals.min.js"></script>

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.

Advertisement