Show an Android style toast notification using HTML/CSS/JavaScript

You have some good libraries on internet to mimic the native android toast message:

  • Toastr
  • https://github.com/jadjoubran/Android-Toast (Javascript)
  • https://github.com/akquinet/jquery-toastmessage-plugin (jQuery)
  • https://gist.github.com/kamranzafar/3136584 (jQuery Mobile)

Basically is a div with the message with some CSS and an animation to show and hide.


The easier way is to make a holder where you put your message. That holder will be hidden.

<div class='error' style='display:none'>Event Created</div>

You add some CSS magic 

.error {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #383838;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

Then with a simple script you can show it for a few seconds. Use .stop() if necessary 

$('.error').fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds


$('button').click(function () {
    $('.error').text($(this).data('text')).fadeIn(400).delay(3000).fadeOut(400); 
});
body, html {
    height:100%;
    width:100%;
    min-height:100%;
    padding:0;
    margin:0;
}
.error {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #383838;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='error' style='display:none'></div>
<button data-text='I did something!'>Do something!</button>

jsFiddle version

This is a very basic example that can then be changed into a function with parameters which will give the text, color, duration and anything else you may need.

Below a more advanced (unnecessarily complicated) way (kinda like a plugin). Here is also a fiddle version.

(function($) {
  $.fn.aToast = function(options) {

    var $this = $(this),
      settings = $.extend({
        fadeOut: 400,
        fadeIn: 400,
        delay: 3000,
        text: 'Whoops! Something happened and I showed up.',
        toastListenEvent: 'click',
        aClass: false
      }, options),
      $at = false,
      aTevents = false;

    settings.toastListenEvent = settings.toastListenEvent + ' a-Toast';
    settings.aClass = 'aToast-view-message' 
                  + (settings.aClass ? ' ' + settings.aClass : '')
    if ($('[data-aToast=true]:not(.aToast-init)').length) 
      $this = $this.add($('[data-aToast=true]:not(.aToast-init)')
                                       .addClass('aToast-init'));

    function _remove() {
      $(this).stop().remove();
    }

    function _displayDiv() {
      $('.aToast-view-message').hide();
      var da = $(this).data('atoast-text');
      var $div = $('<div/>', {
          text: da ? da : settings.text,
          class: settings.aClass
        }).stop().fadeIn(settings.fadeIn)
        .delay(settings.delay)
        .fadeOut(settings.fadeOut, _remove)
        .appendTo('body');
    }

    $this.not('[data-aToast=false]').on(settings.toastListenEvent, _displayDiv);

  };
}(jQuery));

$('button').aToast({
  aClass: 'users-dont-care-about-this-class-name'
});

$('div').aToast({
  aClass: 'hehe',
  toastListenEvent: 'mouseenter',
  text: 'Okay, this is not working'
});


/* or 

$().aToast({
    aClass: 'users-dont-care-about-this-class-name'
});

To listen to data-aToast only

*/
body,
html {
  height: 100%;
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}
.aToast-view-message {
  width: 200px;
  height: 20px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  bottom: 10px;
  background-color: #383838;
  color: #F0F0F0;
  font-family: Calibri;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
  -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
  box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Here goes nothing</button>
<input type='button' data-aToast='true' data-aToast-text='Hey there.' value='Woop!' />
<div style='display:inline-block'>I am a div! Hover me</div>

Tags:

Javascript

Html

Css

Jquery

Recent Posts