JQuery ternElapse Plugin Documentation

The ternElapse plugin allows you to cover any HTML element with a transparent mask and place a loading image and text at the center of the mask. With this plugin you can open and close the mask, change the text and/or image inside the mask or include no text or image to begin with. Cover the document body or cover any other block level HTML element.

Contents 1 Table of contents 2 Sample Code 3 Features 4 Current Version 5 Requirements

Table of contents

• Installation
• How to make it work
• Hiding the mask (elapsor)
• Change Log
• License

Sample Code

<script type="text/javascript">
     jQuery(document.body).bind('click',function () {
          jQuery(document.body).elapsor({
                color:'#fff',
                opacity:85,
                image:'/path/to/your/image/elapsor.gif',
                text:'Loading...',
                text_style:{
                     color:'#000',
                     'font-size':16
                }
          });
     });
</script>

The above example will cover the entire document body with a white mask that is 85% opaque, has an image at its center entitled "elapsor.gif" with the text "Loading..." beneath it whenever the document is clicked. The text will be black and 16 pixels in size.

<script type="text/javascript">
     jQuery(document.body).bind('click',function () {
          jQuery(document.body).hideElapsor();
</script>

The above example hides the mask found in the document's body when the document is clicked.

Features

• Cover any block level HTMl element with a transparent mask.
• Specify the color of the mask with any hexadecimal representation of your color.
• Specify the opacity of the mask by percentage.
• Change the text that goes inside the mask.
• Specify an image that you've created or from my stock images to go inside the mask.
• Use the mask with or without text and image.

Current Version

The current version of this software is 2.2.

Requirements

jQuery 1.2.6+