Javascript Loading Animation

Once upon a time I used to load all of my javascript in the head tag using script includes as the page loaded. Times are a changin', and now we have AMD devices such as RequireJS; Now I can write my JS in modules and load them as and when I need.

When loading all my JS on page load, I normally had some kind of UI control to indicate resources were being loaded. After having converted to RequireJS, this loading time has been divided into smaller more intermittent load times. The problem I've experienced is that sometimes a JS resource gets loaded really slowly, or perhaps it's just big or complicated. For whatever reason, it's not important.. The most important thing is to keep the user updated with whats happening, to have a responsive and active UI.

If a user clicks a button, which indirectly requires remote/new resources, then the response to that button click will only come to pass after RequireJS can download all the required resources. If this response time is too long, then this can confuse the user and/or lead to frustration. Actually,.. whenever I do any XHR or remote requests I want to have the same consistent active UI feedback telling the user what (or something) is happening.

Enter loading.js - A completely over-thought device to display feedback on your UI when it requires the user to wait. You can download all the code from GitHub or you can find a streamlined version of what you're looking for below.

I have tested in the current versions of Chrome (desktop & mobile), Firefox, IE, Safari (desktop & mobile). I don't have much intent in creating fixes for historical versions just yet,.. however I will happily accept pull requests.

Download

Example Usage

JQuery & RequireJS

JQuery & SeaJS

Mootools with no module loader

ScannerKeystrokeObserver

A class to automatically detect entries from a hardware device that generates keystrokes (like a barcode scanner).

Demo

This class is designed on the assumption that your barcode scanner hardware will act like a keyboard. As a barcode is scanned a series of keypress events will be generated by the device. If these key events are in fast enough succession (the order of milliseconds), then it can be assumed that a scanner device pushed the series of key events. Otherwise it is just normal human input and will be ignored by the barcode reader class.

How to use

Include the following code in the head of your web page.

 <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" language="JavaScript" type="text/javascript" ></script>
 <script src="ScannerKeystrokeObserver.js" ></script>
 <script>
 new ScannerKeystrokeObserver({
  onRead: function(v) {
   $('txtGlobal').set('value', v).highlight();
  }
 });
 </script>

Get It

• Download from Mootools Forge
• Source @ GitHub

ImageCarousel Mootools Plugin

An image carousel thats really easy to implement.

Demo

ImageCarousel was designed for those that might get a little intimidated with the Javascript side of web sites.

How to Use

1. Copy your carousel images into their own folder inside your project.
2. Copy ImageCarousel.php into the folder from step one.
3. Download and unzip the ImageCarousel files into your project folder. They should unzip into a folder called 'ImageCarousel'.
4. Copy the following code into the head tag of your website.

   <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" language="JavaScript" type="text/javascript" ></script>
   <link href="ImageCarousel/ImageCarousel.css" rel="stylesheet" type="text/css">
   <script src="ImageCarousel/ImageCarousel.js" language="JavaScript" type="text/javascript"></script>

5. Copy the following code into your webpage. This will act as the carousel element.

   <div class="ImageCarousel auto" rel="Images/Carousel/" styles="width: 500px; height: 375px;"></div>

   You need to change/check:
   • The 'rel' attribute should point to the folder where you have stored your images. The url should end with '/'.
   • Your images should all have the same dimensions; Check the Carousel 'width' and 'height' match your image dimensions.

Get It

• Download from Mootools Forge
• Source @ GitHub
• Detailed Project Page with Demo