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 ...
Simple demo With title icon and close button With icon, close on click, bottom-right corner Top-left and elastic Title, title icon and content icon Fold effect, with custom form and button Many buttons
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.
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>
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>
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. |
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. |
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");
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 | |||||
users | ||||||
error | warning | |||||
help | idea |
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.
.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'); }
$("body").superNotice({ html: "My new icon :)", icon: "demo" });
Suppose you want to create a theme "Silver" :
/* 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 */
/* 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 */
$("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