Press "Enter" to skip to content

Android Style Toast Notification Plugin for Web | toastr.js

Android Style Toast Notification Plugin for the web. toastr.js is written in vanilla javascript, it is lightweight and does not require any additional dependencies. toastrjs was developed with the goal of providing Android Toast style notifications for websites.

Although the default style is an exact copy of the Android toast, you can still customize it with the available options like theme, position, animation, etc.

toast message android example, add toast message android, toast message in android, show toast message android, create toast message android

Features:

  • 6 themes: Android, Moon, Sun, Ocean, Grassland, Rainbow.
  • CSS3-based fading animations and/or slides.
  • 6 position variables: top left, top center, top right, bottom left, bottom center, bottom right.
  • It can also be used as a vanilla JavaScript plugin.

How to make use of it:

1. Load the stylesheet toastr.css and JavaScript toastr.js within the html file.

<link href="toastr/toastr.css" rel="stylesheet" />
<!-- jQuery is optional -->
<script src="jquery.min.js""></script>
<script src="toastr/toastr.js"></script>

2. Create a brand new Toastr instance with default choices.

var toastr = new Toastr();

3. Display a default toast message on the web page.

toastr.show('This is A Basic Toast.');

4. Change the default theme. Possible values: moon, sun, ocean, grassland, rainbow.

var toastr = new Toastr({
    theme: 'moon'
});

5. Change the default position. Possible values: topLeft, topCenter, topRight, bottomLeft, bottomCenter (default), bottomRight.

var toastr = new Toastr({
    position: 'topRight'
});

6. Use the slide animation as an alternative.

var toastr = new Toastr({
    animation: 'slide'
});

7. Set the timeout in milliseconds.

var toastr = new Toastr({
    timeout: 5000
});

8. Make the toast message at all times be seen.

var toastr = new Toastr({
    autohide: false
});

9. Dismiss the toast message manually.

var toastr = new Toastr({
    toastr.hide();
});

Create Toast Messages Like Android, toastr.js Plugin/Github


See Demo And Download

Official Website(voidTricks): Click Here

This superior jQuery/javascript plugin is developed by voidTricks. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.