Javascript Notifications

Topic: Javascript Notifications

BizRTC pro asked 5 years ago

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.

Add comment

Krzysztof Wilk staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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 5 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 commented 5 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

Add comment

Krzysztof Wilk staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Faraj priority answered 5 years ago