OpenMes jQuery – Open Messages with Animation Effects

August 15, 2014February 13, 2023 SONHLAB advertising tools, animation, lightbox, marketing plugins, messages, notifications, popup

OpenMes is a jQuery plugin that is used to create unlimited popups, lightbox, messages, notifications with a lot of animation effects, support text, images, videos and also complicated HTML code. Additionally, OpenMes allows to combine inline and AJAX content for best SEO and performance.

Buy Now

OpenMes Main Features:

Unlimited Messages.
Open Multi Messages in the same page.
A lot of Animation Effects.
Support Auto Open.
Inline Content for SEO.
Support AJAX content with static and dynamic method.

Demos:

Change Logs:

September 2014: First Version.

Credits:

jQuery Library.

<!-- Start jQuery Library -->

<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<!-- <![endif]-->

<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.js"></script>
<![endif]-->

<!-- End jQuery Library -->

OpenMes javascript source:

<!-- OpenFooter jQuery Plugin-->
<script type="text/javascript" src="js/openmes.dev.js"></script>

Done. OpenMes jQuery plugin is now ready to use.

Section 2: OpenMes jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

A simple OpenMes will have the structure like this:

<!-- Start Message Container -->
<div class="mes-container" data-mesid="message-id">
	
   <!-- Start Content Holder -->
   <div class="mes-contentholder">
		
      <!-- Start Message Layer 1 -->
      <div class="mes-content">
         // Add layer content here
      </div>
      <!-- End Message Layer 1 -->
		
   </div>
   <!-- End Content Holder -->
		
</div>
<!-- End Message Container -->

Every message can be store in the Message Station block (<div id=”mes-station”>…</div>) or in an independent file in “/content/openmes/” folder (AJAX method).

With AJAX method we also provide two methods to load independent files: Static and Dynamic.

When you use Static method you need to create files with filenames are “data-mesid” values and you can use with any file extension (html, php,…). To use this method you just provide a “data-ext” param for a button that is use to open a message.

When you use Dynamic method you have to create messages content in “ajaxstation.php” file in “/content/openmes/” folder. You can use “if else” statement to control message content. When the plugin can not find message content in the Message Station it will find and load message content in the “ajaxstation.php” file automatically.

In real use, you can combine Inline Method and AJAX Method for best performance. Example: for messages have long text, you can use Inline Method for best SEO and for messages have a lot of images or videos, you can use AJAX Method to make your page is loaded faster.

Close and Replay a message:

Close and Replay Functions are controled by “mes-closebt” and “mes-replaybt” classes.

If you want to create a “Close” button to close the message you can create a button in a message layer and provide it a “mes-closebt” class.

If you want to create a “Replay” button to replay the message you can create a button in a message layer and provide it a “mes-replayebt” class.

Section 3: Call OpenMes plugin.

First, to open a message you need to create a button and provide it a “data-mesid” param. A button may be text, image or HTML block…

Example:

<span class="mes-openbt" data-mesid="message-id">Demo Button</span>

Then, you need to create a Javascript code to call OpenMes plugin. You can add a script like below into the HEAD section of your page to call OpenMes plugin:

<script type="text/javascript">
$(window).load(function() {
   $('.mes-openbt').openmes();
})
</script>

or you can call OpenMes with Javascript parameters:

<script type="text/javascript">
$(window).load(function() {
   $('.mes-openbt').openmes({
      ext: 'php'
   });
})
</script>

With the above example when a button (with class=”mes-openbt” and data-mesid=”message-id”) is clicked a message with data-mesid=”message-id” will be displayed.

Section 4: Parameters and Effects.

Javascript Parameters:

Parameters	Properties	Description
ext	string	This param is used to set default AJAX file extension (php, html,…).

HTML Parameters:

Parameters	Positions	Description
data-mesid	mes-openbt, mes-container	This param is used to set ID for message content and bar buttons.
data-autorun	mes-openbt	This param is used to set delay time (miliseconds) to open messages automatically.
data-ext	mes-openbt	This param is used to set AJAX file extension. It will override “ext” Javascript param.
data-show	mes-content	This param is used to set showing effects. See the Showing Effect List below.
data-start	mes-content	This param is used to set starting position (in percent) when using “vmove” and “hmove” effects.
data-end	mes-content	This param is used to set ending position (in percent) when using “vmove” and “hmove” effects.
data-direction	mes-content	This param is used to set a direction (left, right, up, down) when using “vline” and “hline” effects.
data-showdura	mes-content	This param is used to set time (miliseconds) to run showing effects. When using CSS3 effects you can ignore this param.
data-live	mes-content	This param is used to set living time (miliseconds) for message layers. After this time the layer will running hiding effects automatically. Ignore this param if you do not want to hide the message layer.
data-delay	mes-content	This param is used to set delay time (miliseconds) to run showing effects.
data-hide	mes-content	This param is used to set hiding effects. See the Hiding Effect List below.
data-hidedura	mes-content	This param is used to set time (miliseconds) to run hiding effects. Ignore this param when using CSS3 effects.

Javascrpt Effects:

Showing:

Hiding:

fade | down | up | left | right.

CSS3 Effects: