Simple Sliding Notification Bar Plugin For jQuery - getNotified
File Size: | 39.1 KB |
---|---|
Views Total: | 4233 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
getNotified is an easy-to-use jQuery plugin to create responsive notification bars that slides out from the top or bottom of your web page. The active notification bars will disappear automatically after a timeout, and you can also dismiss them manually by clicking on the 'close' button.
Basic Usage:
1. Include the getNotified.css
file in the head section for basic styles.
<link rel="stylesheet" href="css/getNotified.css">
2. Include jQuery library and the getNotified.js
script at the end of your web page.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/getNotified.js"></script>
3. Create a container for the notification bar.
<div class="getNotifiedBox"></div>
4. Create a button to trigger a notification bar.
<button class="notify">Click me</button>
5. Call the plugin on the trigger button and set the notification messages and other options.
$(document).ready(function () { $(".notify").getNotified({ // Animation Speed (in MilliSeconds) velocity: 500, // Notification Position: "bottom" or "top" position: "top", // Notification Content: h1 Title title: "Voilà!", // Notification Content: h2 Title subtitle: "GetNotified is making your website notifications awesome", // Notification Type: "success" or "warning" type: "success", // Delay Before Closing the Box (in MilliSeconds) delay: 3200 }); });
This awesome jQuery plugin is developed by AhmedAlShair. For more Advanced Usages, please check the demo page or visit the official website.