Mobile First Toast Message Plugin With jQuery showToast - Download Mobile First Toast Message Plugin With jQuery - showToast

Download Mobile First Toast Message Plugin With jQuery – showToast

By Posted on

This time I will share jQuery Plugin and tutorial about Mobile First Toast Message Plugin With jQuery – showToast, hope it will help you in programming stack.

Mobile First Toast Message Plugin With jQuery showToast - Download Mobile First Toast Message Plugin With jQuery - showToast
File Size: 4.81 KB
Views Total: 1062
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

showToast is a simplest jQuery/Zepto based toaster that helps you display Android-style toast messages on the screen. By default, the toast message will auto dismiss after 1500ms.

How to use it:

1. Include the needed jQuery or Zepto JavaScript library on the webpage.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <!-- Or -->
3 <script src="/path/to/zepto.min.js"></script>

2. Make sure to load the jQuery showToast plugin’s script after jQuery/Zepto library.

view source
1 <script src="showToast.js"></script>
2 <link rel="stylesheet" href="showToast.css"><br type="_moz">

3. Shows a custom toast message on the screen and config it to auto dismiss after 2500ms.

view source
1 showToast.show('This is a Toast Message!',2500)

4. Modify, override or adjust the following CSS snippets to create your own styles.

view source
01 .showToast {
02   position: absolute;
03   left: 0;
04   top: 0;
05   width: 100%;
06   z-index: 19891014;
07 }
08  
09 .showToastInner {
10   pointer-events: none;
11   display: table;
12   position: fixed;
13   left: 0;
14   top: 0;
15   width: 100%;
16   height: 100%;
17 }
18  
19 .showToastTips {
20   display: table-cell;
21   vertical-align: middle;
22   text-align: center;
23 }
24  
25 .showToastTips .showToastCon {
26   display: inline-block;
27   position: relative;
28   background-color: rgba(0,0,0,0.8);
29   color: #fff;
30   padding: 10px 15px;
31   font-size: 14px;
32   border-radius: 6px;
33   box-shadow: 0 0 8px rgba(0,0,0,.1);
34   pointer-events: auto;
35   animation-name: fieldTipBounceIn;
36   -webkit-animation-name: fieldTipBounceIn;
37   -webkit-animation-fill-mode: both;
38   animation-fill-mode: both;
39   -webkit-animation-duration: .18s;
40   animation-duration: .18s;
41 }
42 @-webkit-keyframes
43 fieldTipBounceIn {  0% {
44  opacity: 0;
45  -webkit-transform: scale3d(.3, .3, .3);
46  transform: scale3d(.3, .3, .3);
47 }
48  100% {
49  opacity: 1;
50  -webkit-transform: scale3d(1, 1, 1);
51  transform: scale3d(1, 1, 1);
52 }
53 }

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

source : jqueryscript.net

Related posts: