The "Loading Box"

As of JSMX Version 2.3.0, I have added one possible solution for creating a "loading box" to inform your site's visitors that something is happening while your JavaScript is communicating with the server. Below is a description of how it works.

Inside the engine.js file I am already creating a DIV for you (with the ID of 'JSMX_loading') each time a server request is made, then destroying that DIV when the response is recieved. Using CSS inside your display files you can posistion the DIV and apply a background image of a "loading.gif". The effect is a Pop-Up "Flag" that appears while your server side functionality is processing.

To take advantage of this functionality you need to follow three steps:

1. Open your copy of engine.js and make sure you have version 2.3.0 or later. If you have an earlier version or if you have not yet downloaded engine.js, click here.
2. Click on this image and save it to somewhere under your webroot
3. Add the following (or a similar) delaration to a <style> block or .css file within your display page:

   div#JSMX_loading{
   	position:absolute;
   	top:20px;
   	right:150px;
   	margin:0px;
   	padding:0px;
   	width:112px;
   	height:30px;
   	background-image:url([path to this image]/processing.gif);
   	background-repeat: no-repeat;
   	background-position:center center;
   	z-index:200;
   }

And that's it! Don't forget to change the "background-image" path to a valid url. Of course, you can also substitute the GIF I have listed here with your own image. If you choose not to take advantage of the built-in process I've provided and "roll-your-own" method for creating a "loading div" instead, I would love to hear from you on the solution you came up with.