jQuery Super Notice Plugin

Apr 10, 2014 in Lightbox 2797 views

Download

Overview
Documents

User Rating: 4.9/5 ( 1 votes)

Your Rating:

jQuery Super Notice is a jQuery plugin that allows you to create easily nice and animated notices.Notices can be full customized, positionned in any one of the screen’s corner, and have header, icons and buttons!

Features:

Very easy to use : $(“body”).superNotice(“Hello World !”);
Generator included, create your notification in a few seconds
9 show and hide effects
10 ease presets
11 CSS themes included , create your own easily
14 icons included, add yours easily
Add buttons to your notifications
Many options : autoclose, close on click or close button, title, icons ….
Notices are positioned intelligently, following the others
Auto-sizing icons (48px max)
Full modern browsers compatibility : IE8+, Firefox, Chrome, Opera, Safari …

1. INCLUDE STYLES AND SCRIPTS

    <head>
        ...
        <link href="superNotice/jquery.superNotice.css" rel="stylesheet">    
        <script src="superNotice/jquery-1.8.2.min.js"></script>    <!-- Or your jquery version here -->
        <script src="superNotice/jquery-ui-1.9.0.custom.min.js"></script>
        <script src="superNotice/jquery.superNotice.min.js"></script> 
    </head>

2. HTML

    <a href="javascript:" onclick="notice();">Click me</a>

3.JAVASCRIPT

    <script>
    function notice(){
        $("body").superNotice({
            html: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            icon: "info"
        });
    }
    </script>

4. Parameters

Option name	Type of value	Description
autoClose	true or false	Defines if the window closes by itself.
autoCloseDelay	Integer	Only works if autoclose is true. Sets the delay in ms before closing.
buttons	Array	Sets the buttons of the notice.
buttonsAlign	left, center or right	Defines the alignment of the buttons.
closable	"click", "button" or false	Defines how the notification can be closed.
ease	View ease presets here	Specifies the type of animation for opening and closing.
id	String or false	Give an id to the notice. Only one notification in the same time if filled.
html	Text or HTML	The content of the notification. Can be html code .
icon	String : icon CSS class or path to the file	Sets the icon of the content. Icon is automatically resized. Must be 48*48px image.
onShow	Function	This function will be launched once the notification is appeared.
onClose	Function	This function will be launched once the notification has disappeared.
position	"topLeft","topRight","bottomLeft","bottomRight"	Sets the corner of the container in which the notification is displayed.
theme	"aquatic","black","default","gray", "green","ice","pink","oldoffice","orange","red","yellow"	Sets the corner of the container in which the notification is displayed.
title	String	Sets the title of the notification.
titleIcon	String : icon CSS class or path to the file	Sets the icon of the title. Must be 16*16px image.
speed	Integer	Defines the show and hide animation speed, in ms.
width	Integer or "auto"	Defines the width of the notification.

Buttons parameters

You can easily create buttons to your notification. You can use them like links :

    $("body").superNotice({
        html: "Links buttons demo",
        buttons: [{
            closeOnClick: true,
            href: 'http://www.codecanyon.net',
            icon: 'img/codecanyon.png',
            label: 'Code Canyon',
            target: '_blank'
        }]
    });

You can call a javascript function to :

    $("body").superNotice({
        html: "Links buttons demo",
        buttons: [{
            label: 'Say hello',
            click: function(){
                alert('hello world !');
            }
        }]
    });

There is the buttons parameters :

Option name	Type of value	Description
click	Function	Launch this function when the button is clicked, if "href" is empty.
closeOnClick	true or false	Close notice on the button click.
href	String : URL adress	Defines the url called when the button is clicked.
label	String	Defines the button text.
icon	String : icon CSS class or path to the file	Sets the icon of the button. Must be 16*16px image.
target	"_blank", _parent, _self or _top	Defines the url window target, if "href" is filled.

5. Public methods

Tthe notification is displayed as soon it was created, so the only method you need is closure. To do this, you must assign an id to your notification :

    $("body").superNotice({
        html: "My notification",
        id: "myNoticeID"
    });

You can close yout notification like that :

$("body").data("superNotice").close("myNoticeID");

Icons List

The icons included are both 16x and 48px size, and work for the titles, buttons and content of notifications.

48px	16px	Icon name		48px	16px	Icon name
		accept				info
		advertisment				question
		calendar				sent
		cart				trash
		email				users
		error				warning
		help				idea

Add new icons

There are two types of icons: those of 16px, for header and buttons, and those 48px for content.

Imagine that you got an icon in two sizes: iconDemo_16.png and iconDemo_48.png.

First, copy iconDemo_16.png in the folder ./superNotice/img/16px/
Then copy iconDemo_48.png in the folder ./superNotice/img/48px/

Edit ./superNotice/jquery.superNotice.css . At the bottom of the file, add this code:

.superNotice .superNotice-header  .icon.demo, 
.superNotice .superNotice-content a.superNotice-button .icon.demo  { background-image: url('img/16px/iconDemo_16.png'); }
.superNotice .superNotice-content .icon.demo { background-image: url('img/48px/iconDemo_48.png'); }

That is, your icon is ready to be used :

    $("body").superNotice({
        html: "My new icon :)",
        icon: "demo"
    });

Add a new Theme

Suppose you want to create a theme "Silver" :

Edit ./superNotice/jquery.superNotice.css

Paste this template :

/* Theme : myTheme */
.superNotice.myTheme {
    ...
}
.superNotice.myTheme .superNotice-header {
    ...
}
.superNotice.myTheme .superNotice-header a.superNotice-close {
    ...
}
.superNotice.myTheme .superNotice-header h3 {
    ...
}
.superNotice.myTheme .superNotice-content {
    ...
}
.superNotice.myTheme .superNotice-content a,.superNotice.myTheme .superNotice-content a:hover {
    ...
}
.superNotice.myTheme .superNotice-content input,.superNotice.myTheme .superNotice-content select, .superNotice.myTheme .superNotice-content textarea {
    ...
}
.superNotice.myTheme .superNotice-content .superNotice-button {    
    ...
}

/* eof Theme : myTheme */

Rename "myTheme" to your theme name .

Change style to your liking (you can use this for your css gradients) :

/* Theme : silver */
.superNotice.silver
{
    /* Border radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    /* eof Border radius */
    /* Shadow */
    -moz-box-shadow: 0px 0px 3px #444;
    -webkit-box-shadow: 0px 0px 3px #444;
    box-shadow: 0px 0px 3px #444;
    /* eof Shadow */
}
.superNotice.silver .superNotice-header
{
    padding-top: 0px;
    padding-bottom: 3px;
    border-bottom: 1px solid #999;

    /* Border Top radius */
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -khtml-border-radius-topleft: 6px;
    -khtml-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    /* eof Border Top radius */

    /* Gradient */
    background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    /* eof Gradient */
}
.superNotice.silver .superNotice-header a.superNotice-close
{
    margin-top: 6px;
}
.superNotice.silver .superNotice-header h3
{
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-shadow: none;
}
.superNotice.silver .superNotice-content
{
    color: #333;
    text-shadow: none;    
    /* Border radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;   
    /* eof Border radius */ 
    /* Gradient */
    background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    /* eof Gradient */
}
.superNotice.silver .superNotice-content a,.superNotice.silver .superNotice-content a:hover
{
    color: #c8eefb;
    text-shadow:none;   
    font-weight: normal;
}
.superNotice.silver .superNotice-content input,.superNotice .superNotice-content select,.superNotice .superNotice-content textarea
{
    border: 1px solid #DDD;
}
.superNotice.silver .superNotice-content .superNotice-button
{    
    font-size: 12px;
    color: #131313;
    /* Border radius */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; 
    /* eof Border radius */
    /* Gradient */
    background: #eeeeee;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
    /* eof Gradient */
}
.superNotice.silver .superNotice-content a.superNotice-button:hover
{
    color: white;
    /* Shadow */
    -moz-box-shadow: 0px 0px 4px #FFF;
    -webkit-box-shadow: 0px 0px 4px #FFF;
    box-shadow: 0px 0px 4px #FFF;
    /* eof Shadow */
}
.superNotice.silver .superNotice-content a.superNotice-button:active
{
    /* Shadow */
    -moz-box-shadow: inset 0px 0px 8px #000;
    -webkit-box-shadow: inset 0px 0px 8px #000;
    box-shadow: inset 0px 0px 8px #000;
    /* eof Shadow */
}

/* eof Theme : silver */

That's all, your theme is ready !

    $("body").superNotice({
        html: "This is my new theme :)",
        theme: "silver" 
    });

JS Tutorial