Tiny Toast Notification Library For jQuery - Toast.js

Tiny Toast Notification Library For jQuery - Toast.js

Toast.js is a small, simple, CSS-less, cross-browser jQuery toast notification plugin that you can determine how long theĀ toast message stays on the screen.

Supports both plain Text and HTML content inside the toast notification.

1. Put the main JavaScript file 'Toast.js' after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
         crossorigin="anonymous">
</script>
<script src='./js/toast.js'></script>

2. The JavaScript to show a custom toast message on the screen.

$.toast({
  // toast message here
  title: 'I am a TOAST notification'
});

3. By default the toast notification will auto dismiss after 5 seconds. You can override the default timeout in the JavaScript:

$.toast({
  duration: 5000
});

4. Set the position of the toast notification: Top, Middle or Bottom.

$.toast({
  position: 'bottom' // default: 'middle'
});

5. Customize the appearance of the toast notification.

$.toast({
  // width
  width: 'auto',
  // height
  height: '28px',
  // background color
  backgroundColor: 'blue',
  // text color
  textColor: 'white',
  // line height
  lineheight: '1.6'
});

This awesome jQuery plugin is developed by b-withers. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 20.08.2018
  • Source