Custom notifications
Today, I’m excited to share some significant enhancements to my custom notification tool, which is now equipped with both custom notifications and flash notifications. This upgrade aims to provide a more refined and user-friendly interaction experience, ensuring that my users are always informed with clear, concise, and timely feedback.
Custom notifications tool
My custom notification feature now allows for more personalized alerts, giving users the flexibility to tailor notification styles, titles, and messages. This means that whether you’re looking to inform, warn, or congratulate users, it can be done so in a way that best fits the context of the application.
First the CSS need to be defined:
/* Custom notification and button styling with base color #669999 */
.notif-custom, .btn-custom {
background-color: #669999; /* Base color */
color: #FFFFFF;
}
Then the html:
<link rel="stylesheet" href="/assets/css/notif.min.css" media="screen"/>
<script src="/assets/js/notif-flash.min.js"></script>
<button type="button" class="btn btn-custom" id="myButtonNotifCustom">Custom color<button>
And finally the JavaScript:
$('#myButtonNotifCustom').click(function() { showNotification('This is a custom color message!', 'notif-custom'); });
The results:
Flash notifications
Flash notifications have been revamped to offer a seamless experience. These fleeting alerts provide immediate feedback to users for actions such as form submissions or login attempts, and then gracefully disappear, keeping the interface clean and focused.
With these enhancements, my notification tool stands out as a more adaptable and intuitive solution for user feedback. We’re committed to continuously improving the user experience and look forward to seeing how these new features will be utilized in any projects.
For more information and examples of the notification tool, please visit this link.