Topic: Javascript Notifications
I want to use MDB's Javascript notifications.But I am not sure how to use them! As they are just plain HTML code. How do I trigger them using jQuery or Javascript.
I am reffering to this :Javascript Notifications
Can you please provide a tutorial or snippet which we can reffer.
Krzysztof Wilk staff answered 6 years ago
Hello,
You have to make something, that when you click on it (or make other event), it will trigger the notification. For example you're making button with id="button1"
, then you have to make eventListener
on this button and in the function you must paste this trigger code $('.toast').toast('show');
. You can use other options in brackets instead of 'show'
if you want. Everything in <script>
tags of course. In HTML you have to paste content of your notification, as you can see in documentation. I made a snippet some time ago with notifications and it placement, so you can see how it works and how to place your notification wherever you want.
Snippet: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/634541
BizRTC pro commented 6 years ago
how can i set options to this ? like changing the color or autohide or time using javascript ? I want to hide this notfication after 10 seconds how do I control that ? Also how do i add animation to the notification
MDBootstrap staff pro premium priority commented 6 years ago
Hi, to show you proper way of working with styled popup I modified snipped with example of styling popup on click. https://mdbootstrap.com/snippets/jquery/pjoter-2-0/743662 I commented JS code to make everything clear but if you have any further questions I'm here for you. Best regards, Piotr
Faraj pro premium priority answered 6 years ago
Dear Support,
i want to use the notifications as error
For example :
if user left the email input form is blank , i want to show the notification without pressing a button . is it possible ?
NOTE: i am using php for backend
Krzysztof Wilk staff answered 6 years ago
I think you should use "Blur" event and conditional instruction to check if input is empty or not. "Focus" and "Blur" are basic events for inputs handling. "Focus" event is triggered, when you click on input/textarea and make it active, I mean you can write inside it etc. "Blur" event is opposite, it is triggered, when you click outside of the input/textarea". I think your script should check if user wrote something inside the input and show popover only, when this value is empty, I mean input is empty. You can use "if" conditional to do it. Everything you can make using JavaScript/jQuery.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.7
- Device: Windows 10 PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes