Noist Notifications Demos

Plugin features

Browsers : all Browsers
Devices : both Desktop and Mobile
Responsive : Yes
Positions: Bottom Left, Bottom Right, Top left, Top right
Templates: Default, Success, Warning, Danger, Error, Info, Transparent, White. And Custom templates is supported
Animation Effects: animate.css or any css animation framework
Media: Images and Videos in Notifications : ( Normale / Full width / Media with text and html)

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Add JavaScript to your HTML to launch Noist plugin:


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message :
  notification.message("Your Message Here");
  
  //Notification add other Message :
  notification.message("Your Second Message Here");
  
});

Done.

Position

Demo
Usage

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Choose 1 of the following JavaScript Examples and add it to your HTML:

Top Left


jQuery(document).ready(function($){
  
  var notifTopLeft = $.noist({
    position : 'top left'
  });
  
  //Notification ( Top Left ) add Message :
  notifTopLeft.message("Your Message Here");
  
  //Notification ( Top Left ) add other Message :
  notifTopLeft.message("Your Second Message Here");
  
});

Top Right


jQuery(document).ready(function($){
  
  var notifTopLeft = $.noist({
    position: 'top right'
  });
  
  //Notification ( Top Right ) add Message :
  notifTopLeft.message("Your Message Here");
  
  //Notification ( Top Right ) add other Message :
  notifTopLeft.message("Your Second Message Here");
  
});

Bottom Left


jQuery(document).ready(function($){
  
  var notifBottomLeft = $.noist({
    position: 'bottom left'
  });
  
  //Notification ( Bottom Left ) add Message :
  notifBottomLeft.message("Your Message Here");
  
  //Notification ( Bottom Left ) add other Message :
  notifBottomLeft.message("Your Second Message Here");
  
});

Bottom Right


jQuery(document).ready(function($){
  
  var notifBottomRight = $.noist({
    position: 'bottom right'
  });
  
  //Notification ( Bottom Right ) add Message :
  notifBottomRight.message("Your Message Here");
  
  //Notification ( Bottom Right ) add other Message :
  notifBottomRight.message("Your Second Message Here");
  
});

Done.

Colors

Demo
Usage

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Choose 1 of the following JavaScript Examples and add it to your HTML:

Default


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Default ) :
  notification.message("Your Message Here");
    
});

Success


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Success ) :
  notification.message("Your Message Here","success");
    
});

Info


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Info ) :
  notification.message("Your Message Here","info");
    
});

Warning


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Warning ) :
  notification.message("Your Message Here","warning");
    
});

Danger or Error


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Danger ) :
  notification.message("Your Message Here","danger");
  
  //OR
  
  //Notification add Message ( Error ) :
  notification.message("Your Message Here","error");
    
});

White


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( White ) :
  notification.message("Your Message Here","white");
    
});

Transparent


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Message ( Transparent ) :
  notification.message("Your Message Here","transparent");
    
});

Done.

noist.js + animate.css

Demo
Usage

Out

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Add JavaScript to your HTML to launch Noist plugin:


jQuery(document).ready(function($){
  
  var notification = $.noist({
    showEffect  : 'fadeIn',
    hideEffect  : 'fadeOut',
    closeEffect : 'fadeOut',
  });
  
  //Notification add Animated Message :
  notification.message("Your Message Here");
  
  //Notification add other Animated Message :
  notification.option.showEffect = 'fadeInLeft';
  notification.message("Your Second Message Here");
  
});

Done.

Media

Demo
Usage

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Add JavaScript to your HTML to launch Noist plugin:

Image


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Image Message + default style:
  notification.message('<img src="./images/demo.jpg">',"default");
  
});

Image Full width


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Image + Text Message:
  notification.message('<img src="./images/demo.jpg">',false,"fluid");
  
});

Image + Text Message


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Text Message with Image:
  notification.message(
  '<p style="text-align: center;"><b>Eagle Image</b></p>'
  +'<p><img src="./images/demo.jpg"></p>'
  +'<p>Message Under Image</p>'
  );
  
});

Iframe,embed,object,video,audio ( Responsive ) is supported :

Video


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Embed Video Message :
  notification.message(
  '<iframe width="560" height="315" src="https://www.youtube.com/embed/oHw1EBKb_wk?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
  false,
  ,"embed");
  
});

Video Full width


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Full width Embed Video Message:
  notification.message(
  '<iframe width="560" height="315" src="https://www.youtube.com/embed/oHw1EBKb_wk?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
  ,false,
  "embed fluid"
  );
  
});

Video + Text Message

Note : Embed iframe + Text message need custom wrapper element " <div class="noist-embed">Your iframe code here </div>" to make it responsive Like the Example :


jQuery(document).ready(function($){
  
  var notification = $.noist();
  
  //Notification add Embed Video + Text Message:
  //Note : Embed iframe need custom wrapper element " <div class="noist-embed">Your iframe code here </div>" to make it responsive:
  notification.message(
    '<p style="text-align: center;"><b>Iframe Video</b></p>'
    +'<div class="noist-embed">'
    +'<iframe width="560" height="315" src="https://www.youtube.com/embed/oHw1EBKb_wk?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
    +'</div>'
    +'<p>Message Under Ifram</p>'
  );
  
});

Done.

Custom Template

Demo
Usage

1 time

Insert before </head> in your HTML (replace your-path):

<link href="your-path/noist.min.css" rel="stylesheet">
<script src="your-path/noist.min.js">

Add JavaScript to your HTML to launch Noist plugin:


jQuery(document).ready(function($){
  
  var emailNotification = $.noist({
    delay: 0,
    position  : 'bottom right',
    limit    : 1,
    stopOnLimit    : true,
    limitEffect  : 'hide',
    template : function (msg){
      
	  this.wrap = true;
      
      defaults  = {
        'action'  : '',
        'name'    : '',
        'email'   : '',
        'subject' : '',
      };
      var obj = $.extend({},defaults ,msg);
      
      var tmpl =  '<form action="'+obj.action+'">'
              +'<div class="form-group">'
                +'<label for="email">Name:</label>'
                +'<input type="text" class="form-control" name="name" id="name" value="'+obj.name+'">'
              +'</div>'
              +'<div class="form-group">'
                +'<label for="email">Email:</label>'
                +'<input type="email" class="form-control" name="email" id="email" value="'+obj.email+'">'
              +'</div>'
              
              +'<div class="form-group">'
                +'<label for="pwd">Subject:</label>'
                +'<textarea class="form-control" name="subject" id="subject" style="min-height: 80px; max-height: 300px; min-width:100%;max-width:100%;">'+obj.subject+'</textarea>';
              +'</div>'
              
              +'<button type="submit" class="btn btn-default">Submit</button>'
              
            +'</form>';
			
      return tmpl;
    }
  });
  
  var formData = {
        'action'  : '',
        'name'    : 'Adnane Zarrouk',
        'email'   : '[email protected]',
        'subject' : message,
        };
        
  emailNotification.message(formData,'white');
  
});

Done.

Options

Name	Type	Default	Description
position	string	`bottom left`	Notifications Position : `top left, top right, bottom left, bottom right`
showEffect	string	`fadeIn`	Use Animate.css for more animation effects
hideEffect	string	`fadeOut`	Use Animate.css for more animation effects
closeEffect	string	`fadeOut`	Use Animate.css for more animation effects
limit	integer	`0`	Limit display notifications on current position
stopOnLimit	boolean	`false`	Stop displaying new notifications on currnt position (new notifications will be displayed when old notifications is closed )
duration	integer	`800`	Animation duration
delay	integer	`6000`	Notification delay (Time to Hide each Notification)
close	boolean	`true`	Enable/Disable Close button on Notifications
closeHtml	string	`<a href="http://#close" id="{close_selector}" class="noist-close" title="close" role="button"></a>`	You can edit close button html to other close button html ( Required to use `closeId` Option or `id="{close_selector}"` in your html button ).
closeId	string	`#noist-close`	Change close button id
template	function	`null`	template function allowing you to create html template inside notification , The function Parameter supporting any type
insert	string	`auto`	you can use 3 options to insert next new notification : `append` ( above old notifications ) OR `prepend` ( under old notifications ) OR`auto` Based to notifications wrapper Position, Recommended : `auto`.
class	string	`empty`	Add Class to Notifications Wrapper

Events

Event	Description
`notification.beforeShow = function(message){ //Do sometnig here };`	Fires before notification show
`notification.afterShow = function(message){ //Do sometnig here };`	Fires after notification show
`notification.beforeHide = function(message){ //Do sometnig here };`	Fires before notification hide
`notification.afterHide = function(message){ //Do sometnig here };`	Fires after notification hide
`notification.beforeClose = function(message){ //Do sometnig here };`	Fires before notification close with button
`notification.onHover = function(message){ //Do sometnig here };`	Fires on notification hover
`notification.onLimit = function(){ //Do sometnig here };`	Fires when notifications is reached limit
`notification.onClear = function(){ //Do sometnig here };`	Fires before notifications clear

Please report issues! Thanks for checking it out and supporting 22Codes Dev Team.