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
This plugin is listed and searchable in the jQuery plugin directory.
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="http://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="http://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
Home > Products > Plugins > jQuery Plugins > ternElapse | jQuery HTML element masking