In this article, I am going to show you how to display notification messages in Webpage. Toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. It’s a quite nice way to report info or error or warning to the user.
Demo
Demo
The plugin is entirely customizable. So you can change the positioning, the required user action, the style and so on.
Installation
The plugin is download from here .
jquery.toastmessage.js -- the plugin
css/jquery.toastmessage.css -- the css file
images/error.png -- image
images/close.gif -- image
images/notice.png -- image
images/success.png -- image
images/warning.png -- image
Types of messages
4 different types message you can use. Each type comes with its own icon and colored border. The types are:
- notice
- success
- warning
- error
Easy to use
The following methods will display a toast message:
$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', 'some message here');
$().toastmessage('showWarningToast', 'some message here');
$().toastmessage('showErrorToast', 'some message here');
You can alter the configuration to your special use case.
// user configuration of all toastmessages to come:
$().toastmessage({
text : 'Ashish Blog', // content of the item
sticky : true, // should the toast item sticky or not?
position : 'top-right', // top-left, top-center, top-right, middle-left, middle-center, middle-right
// Position of the toast container holding different toast.
// Position can be set only once at the very first call,
// changing the position after the first call does nothing
type : 'success', // notice, warning, error, success
close : function () {console.log('toast is closed ...');}
});
Here is example of all type of message code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ashish's Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.toastmessage.js" type="text/javascript"></script>
<link href="jquery.toastmessage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showSuccessToast() {
$().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
}
function showStickySuccessToast() {
$().toastmessage('showToast', {
text: 'Success Dialog which is sticky',
sticky: true,
position: 'top-right',
type: 'success',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
function showNoticeToast() {
$().toastmessage('showNoticeToast', "Notice Dialog which is fading away ...");
}
function showStickyNoticeToast() {
$().toastmessage('showToast', {
text: 'Notice Dialog which is sticky',
sticky: true,
position: 'top-left',
type: 'notice',
closeText: '',
close: function () { console.log("toast is closed ..."); }
});
}
function showWarningToast() {
$().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
}
function showStickyWarningToast() {
$().toastmessage('showToast', {
text: 'Warning Dialog which is sticky',
sticky: true,
position: 'middle-right',
type: 'warning',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
function showErrorToast() {
$().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
}
function showStickyErrorToast() {
$().toastmessage('showToast', {
text: 'Error Dialog which is sticky',
sticky: true,
position: 'center',
type: 'error',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<span class="description">Show a success toast</span> <a href="javascript:showSuccessToast();">not
sticky</a>|<a href="javascript:showStickySuccessToast();">sticky</a>
</p>
<p>
<span class="description">Show a notice toast</span> <a href="javascript:showNoticeToast();">not sticky</a>|<a
href="javascript:showStickyNoticeToast();">sticky</a>
</p>
<p>
<span class="description">Show a warning toast</span> <a href="javascript:showWarningToast();">not
sticky</a>|<a href="javascript:showStickyWarningToast();">sticky</a>
</p>
<p>
<span class="description">Show a error toast</span> <a href="javascript:showErrorToast();">not sticky</a>|<a
href="javascript:showStickyErrorToast();">sticky</a>
</p>
</div>
</form>
</body>
</html>
Thanks.
