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

Question

Normally when you would like to make a user aware of something you use an alert.

Now say I would like to do that but in a Android toast like way, namely a popup that shows up on screen but then a few seconds later disappears by itself so the user won't have to bother closing it, like the image below.

How could something like this be achieved in the web?
Note: Doing a touch interface so that's the reason I would like to have it in this way

Answer 1

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>

Answer 2

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.