Ternstyle

ternElapse | jQuery HTML element masking

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.

Download Version: 2.1

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.

Current Version

The current version of this software is 2.1.

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.

Requirements

jQuery 1.2.6+

Installation

Installation is simple. Please follow the steps below.

1. Upload both the jQuery library of your choice as well as the ternElapse plugin to your server in the directory of your choice.

2. Include the code for jQuery inside the head tags of the html document you’d like to use this plugin.

<script type="text/javascript" src="https://www.ternstyle.us/path/to/your/jquery.js"></script>

3. Include the code for ternElapse inside the head tags of the html document you’d like to use this plugin somewhere after you included the jQuery library.

<script type="text/javascript" src="https://www.ternstyle.us/path/to/your/ternElapse.js"></script>

4. Upload the HTML file you just edited.

5. You have now installed the code for the specific HTML file. Now click here to learn how to use the plugin.

Documentation

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