jQuery Notific8 - Notifications introduced in Windows 8

Notific8 is a notification plug-in inspired by the notifications introduced in Windows 8 with some web ready restyling and customizations. Notific8 has built in themes and is easy to create new themes for. The plug-in was born from a want for a simply designed yet modern and stylish notification system. The plug-in is also designed to scale based on the page's font-size setting

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: willsteinmetz.net

1. INCLUDE CSS AND JS FILES

<link href="http://willsteinmetz.net/sites/default/public/stylesheets/jquery.notific8.min.css" media="screen" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="http://willsteinmetz.net/libs/javascript/jquery/latest/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://willsteinmetz.net/sites/default/public/javascripts/jquery.notific8.min.js"></script>

2. JAVASCRIPT

// basic
$.notific8('My notification message goes here.');
// with a life set
$.notific8('My notification message has a life span.', {life: 5000});
// with a heading
$.notific8('My notification has a heading line.', {heading: 'Notification Heading'});
// with a theme
$.notific8('My notification has a theme.', {theme: 'amethyst'});
// make the notification sticky
$.notific8('My notification is sticky.', {sticky: true});
// change whether to notification is at the top or bottom
$.notific8('My notification is at the bottom.', {horizontalEdge: 'bottom'});
// change whether to notification is on the left or right
$.notific8('My notification is on the left.', {verticalEdge: 'left'});
// set the z-index
$.notific8('My notification has a z-index of 1500.', {zindex: 1500});
// all options set
$.notific8('My notification with all options.', {
  life: 5000,
  heading: 'Notification Heading',
  theme: 'amethyst',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500
});

// set up your own default settings to save time and typing later
// NOTE this is not required
$.notific8('configure', {
  life: 5000,
  theme: 'ruby',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500
});

// set the zindex
$.notific8('zindex', 1500);

3. OPTIONS

• life: number of milliseconds that the notification will be visible (default: 10000)
• heading: short heading for the notification
• theme: string for the theme (default: 'teal')
  • Custom themes should be named .jquery-notific8-notification.[theme name] in your stylesheet - see note below about custom themes
• sticky: boolean for whether or not the notification should stick
  • If sticky is set to true, life will be ignored if it is also set
• horizontalEdge: string value for top or bottom of the page (default: 'top')
  • only accepts values 'top' and 'bottom'
• verticalEdge: string value for left or right of the page (default: 'right')
  • only accepts values 'left' and 'right'
• zindex: integer value for the z-index (default: 1100)
  • this must be set before calling notific8 to create a notification via either config/configure or zindex

All of these settings are available to be configured. The configure function is used if you have specific settings such as theme and life that you want every notification to share. By configuring these settings, they become the new defaults and you don't have to type them for every notification. The configure function can be called multiple times.