Elementals.js

Latest Version: 2.0 RC 3 14 March 2017

elementals.js demos, libraries, and examples

The following libraries and demos show typical real-world usage scenarios for the elementals.js library. Like elementals.js itself they are to be considered to be released to the public domain, so you may freely use them on your website.

Demos

AJAX

Asynchronous JavaScript and XML -- AJAX for short -- is a very powerful feature of JavaScript that can be tricky for beginners and experts alike to leverage, particularly given the cross-browser woes of the past two decades. Our elementals.js library gives you an _.ajax method to create your XMLHttpRequest or equivalent ActiveX ojbect quickly and easily.

Multiple Demos are available

  1. Simple AJAX Demo.
  2. AJAX and the "onprogress" event.
Table and List Sorting

elementals.js also provides a very quick and easy way to sort lists and tables in your markup using its _.uSortElement method.

  1. Sorting a UL or OL
  2. Sorting a table body
Form Handling

We can also very simply serialize a form for use with AJAX or as "GET" data.

Selecting contents of an Element

Two methods for handling the selection of content are provided. _.nodeSelect which actually handles the gruntwork of selecting content as if you dragged across it with the mouse, and _.nodeAddSelectButton which can automatically add a button to the page that when clicked will select the element it is related to.

Libraries

eFlipper.js

A relatively simple to use carousel / slideshow script. At just 3.94k in JavaScript and 4.25k of CSS it is far leaner than most such scripts even when you count the 20k of the elementals.js against it. Even so it provides fade animations as well as two different types of "slide-in" effects in all four directions.

The animations are handled by CSS3 with the JavaScript only swapping two classes to trigger it. As such any animation you can concieve of in CSS3 can be added by you!

eProgress.js

Loosely based on the nProgress library for jQuery, eProgress.js delivers all the same functionality in a much smaller and tighter package.

Basically this just adds a position:fixed progress bar to the top of the page window you can control from JavaScript. It uses CSS3 animations, with the scripting only providing controls over how far across the screen the progress bar is. As such you can restyle the bar and/or rotating "working" animation however you like from the stylesheet.

eSmooth.js

An on-page smooth-scroll to hash links script with automatic detection of the appropriate anchors. Behavior of anchors and scrolling can be changed either with global parameters, or data- attributes on your anchors.

Downloads

Advertisement