Hi we may have seen notify popup in various websites like displaying messages to user for couple of seconds and disappears automatically. Its pretty simple by using notify.js file and just need to call notify method with message text along with its type as parameter (optional). Different messages types and notify styles are "success", "info", "warn" and "error".
Apart from basic notification we can get elements position notifications also with their different positions like left, right, top, bottom etc., For complete API details you can their official site http://notifyjs.com/
Lets see simple example for using notify in our web application.
SAMPLE CODE:
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script src="notify.min.js"></script>
</head>
<body>
<ul style="list-style:none;line-height:40px;">
<li><div onclick='$.notify("Steve Success Story...", "success");'>Click for SUCCESS</div></li>
<li><div onclick='$.notify("Get detail information on legal battle...", "info");'>Click for INFO</div></li>
<li><div onclick='$.notify("Carefull on public internet...", "warn");'>Click for WARNING</div></li>
<li><div onclick='$.notify("Oops, Page not found !!!", "error");'>Click for ERROR</div></li>
</ul>
</body>
</html>
OUTPUT:
Apart from basic notification we can get elements position notifications also with their different positions like left, right, top, bottom etc., For complete API details you can their official site http://notifyjs.com/
Lets see simple example for using notify in our web application.
SAMPLE CODE:
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script src="notify.min.js"></script>
</head>
<body>
<ul style="list-style:none;line-height:40px;">
<li><div onclick='$.notify("Steve Success Story...", "success");'>Click for SUCCESS</div></li>
<li><div onclick='$.notify("Get detail information on legal battle...", "info");'>Click for INFO</div></li>
<li><div onclick='$.notify("Carefull on public internet...", "warn");'>Click for WARNING</div></li>
<li><div onclick='$.notify("Oops, Page not found !!!", "error");'>Click for ERROR</div></li>
</ul>
</body>
</html>
OUTPUT:
No comments:
Write comments