jquery - 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

question from:https://stackoverflow.com/questions/17723164/show-an-android-style-toast-notification-using-html-css-javascript

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>