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 !

It can be used for your websites, your admin interfaces, contact forms send ...

  • Very easy to use : $("body").superNotice("Hello World !");
  • Generator included, create your notification in a few seconds
  • 9 show and hide effects
  • 10 easing presets
  • 14 icons included, add yours easily
  • 11 CSS themes included , create your own 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 ...

HTML Code :

    <a id="demo1" href="javascript:" >Simple demo</a> 

JS Code :

    $('body').superNotice('Hello World !'); 

HTML Code :

    <a id="demo2" href="javascript:" >With title icon and close button</a> 

JS Code :

    $("body").superNotice({
            autoClose: false,
            closable: "button",
            icon: false,
            hideEffect: "drop",
            theme: theme,
            title: "New message",
            titleIcon: "email",
            showEffect: "drop",
            html: "You've got a new message !<br/>Read it : <a href='#'>Click here !</a>"
        });

HTML Code :

    <a id="demo3" href="javascript:" >With icon, close on click, bottom-right corner</a> 

JS Code :

    $("body").superNotice({
            autoClose: false,
            closable: "click",
            icon: "accept",
            theme: theme,
            html: "Thanks, your message has been sent.<br/>We will contact you ASAP .",
            position: "bottomRight"
        });

HTML Code :

    <a id="demo4" href="javascript:" >Top-left and elastic</a> 

JS Code :

    $("body").superNotice({
            closable: "button",
            hideEase: "easeInElastic",
            hideEffect: "scale",
            html: "I'm Elastic !",
            icon: "idea",
            showEase: "easeOutElastic",
            showEffect: "scale",
            speed: 500,
            position: "topLeft",
            theme: theme
        }); 

HTML Code :

    <a id="demo5" href="javascript:" >Title, title icon and content icon</a> 

JS Code :

    $("body").superNotice({
            autoClose: false,
            closable: "click",
            icon: "warning",
            hideEffect: "explode",
            showEffect: "puff",
            theme: theme,
            title: "Warning",
            titleIcon: "warning",
            html: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla euismod odio id bibendum. Etiam semper feugiat interdum. Praesent vitae leo eget augue rutrum lobortis. Curabitur ac lectus sit amet elit dapibus laoreet sed quis eros. Donec eu eros a mauris suscipit ...",
            width: 400
        });

HTML Code :

    <a id="demo6" href="javascript:" >Fold effect, with custom form and button</a> 

JS Code :

 var content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
        content += '<p><label>My e-mail :</label><input style="width: 274px;" /></p>';

        $("body").superNotice({
            autoClose: false,
            buttons: [
                {
                    label: "Let\'s go !",
                    icon: "accept",
                    click: function(notice) {
                        if (checkEmail(notice.find('input').val())) {
                            $("body").data("superNotice").close(notice);
                            setTimeout(function() {
                                $("body").superNotice({
                                    html: "Your email has been registred",
                                    icon: "sent",
                                    theme: theme
                                });
                            }, 1000);

                        } else
                        {
                            notice.find("input").css({borderColor: "red", color: "red"});
                        }
                    }
                }
            ],
            closable: "button",
            hideEffect: "fold",
            showEffect: "fold",
            speed: 800,
            theme: theme,
            title: "email",
            titleIcon: "info",
            html: content,
            width: 400
        });
                            

HTML Code :

    <a id="demo7" href="javascript:" >Many buttons</a> 

JS Code :

    $("body").superNotice({
            autoClose: false,
            buttons: [
                {
                    label: "Code Canyon",
                    href: "http://www.codecanyon.net",
                    icon: "img/codecanyon.png",
                    target: "_blank"
                },
                {
                    label: "Graphic River",
                    href: "http://www.graphicriver.net",
                    icon: "img/graphicriver.png",
                    target: "_blank"
                },
                {
                    label: "Theme Forest",
                    href: "http://www.themeforest.net",
                    icon: "img/themeforest.png",
                    target: "_blank"
                }
            ],
            closable: "button",
            theme: theme,
            html: "<b>Where do you want to go ?</b>"
        });
                            

To help you go faster without needing to read the documentation below, I develop this generator. It will allow you to easily create your notifications. You only have to copy and paste the generated code.

Use the generator now

Initialization

Unzip the plugin file, then copy ./superNotice/ folder to your web project.

You just need to import jquery,jquery ui (core and effects),jQuery Super Notice libs and jQuery Super Notice CSS file :

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

Usage

This plugin is used like any jQuery plugin:

   $("body").superNotice(parameters);

The notice appears immediately, and is destroyed after closing.

Example :

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

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

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.

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 accept accept info info info
advertisment advertisment advertisment question question question
calendar calendar calendar sent sent sent
cart cart cart trash trash trash
email email email users users users
error error error warning warning warning
help help help idea idea 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" 
        });

Do not hesitate to contact me if you need help, or if you have suggestions and criticisms.
Thank you contact me from my profile codecanyon: codecanyon.net/user/loopus