OpenMes jQuery – Open Messages with Animation Effects

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.

 

 

 

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:

 

Table of Contents:

  1. Installing OpenMes jQuery Plugin.
  2. OpenMes jQuery HTML Structure.
  3. Call OpenMes jQuery Plugin.
  4. Parameters and Effects.

 

 

Section 1: Installing OpenMes jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>. Include the following code into HEAD section of the page.

Required CSS files:

<!-- Style For Animation Effects -->
<link rel="stylesheet" href="css/animation-effects.css" type="text/css" />

<!-- SONHLAB Base -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- OpenFooter CSS Pack -->
<link rel="stylesheet" href="css/openmes.css" type="text/css" />

 

CSS for old Internet Explorer:

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/fix-ie8.css" type="text/css" />
<![endif]-->

 

jQuery library (If your site has already had jQuery library you do not need to do this step):

<!-- 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:

vmove | hmove | typing | vline | hline | fade.

Hiding:

fade | down | up | left | right.

 

CSS3 Effects:

Showing:

flipInX | flipInY | fadeIn | fadeInUp | fadeInDown | fadeInLeft | fadeInRight | fadeInUpBig | fadeInDownBig | fadeInLeftBig | fadeInRightBig | bounceIn | | bounceInDown | bounceInUp | bounceInLeft | bounceInRight | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight | lightSpeedIn | twisterInDown | twisterInUp | swap | puffIn | vanishIn | swashIn | foolishIn | tinRightIn | tinLeftIn | tinUpIn | tinDownIn.

 

Hiding:

flipOutX | flipOutY | fadeOut | fadeOutUp | fadeOutDown | fadeOutLeft | fadeOutRight | fadeOutUpBig | fadeOutDownBig | fadeOutLeftBig | fadeOutRightBig | bounceOut | bounceOutDown | bounceOutUp | bounceOutLeft | bounceOutRight | rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft | rotateOutUpRight | lightSpeedOut | magic | puffOut | vanishOut | swashOut | foolishOut | holeOut | tinRightOut | tinLeftOut | tinUpOut | tinDownOut | bombRightOut | bombLeftOut.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in OpenMes Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!