jquery - Show an Android style toast notification using HTML/CSS/JavaScript -
normally when make user aware of use alert.
now in android toast way, namely popup shows on screen few seconds later disappears itself user won't have bother closing it, image below.
how achieved in web?
note: doing touch interface that's reason have in way
the easier way make holder put message. holder hidden.
<div class='error' style='display:none'>event created</div> you add 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 simple script can show 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>this basic example can changed function parameters give text, color, duration , else may need.
below more advanced (unnecessarily complicated) way (kinda plugin). here fiddle version.
(function($) { $.fn.atoast = function(options) { var $this = $(this), settings = $.extend({ fadeout: 400, fadein: 400, delay: 3000, text: 'whoops! happened , 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, not working' }); /* or $().atoast({ aclass: 'users-dont-care-about-this-class-name' }); listen data-atoast */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 div! hover me</div>
Comments
Post a Comment