jadjoubran / android-toast

An HTML5 replication of the Native Android Toast http://developer.android.com/guide/topics/ui/notifiers/toasts.html

Android-Toast

An HTML5 replication of the Native Android Toast http://developer.android.com/guide/topics/ui/notifiers/toasts.html

Demo: http://jadjoubran.github.io/Android-Toast/

Compatible with PhoneGap applications.

To use Android toast, simply include src/css/toast.css and src/js/toast.js to your project and call the android_toast javascript function (does not require jQuery or any external DOM manipulation library)

<script>
	var toast1 = new Android_Toast({content: 'Please check your connection and try again.'});
</script>

You can also customize the position and the duration:

<script>
	var toast2 = new Android_Toast({content: 'Connected to Wi-Fi network <em>Router Name</em>', duration: 4000, position: 'top'});
</script>

Installation

Package is available through bower:

bower install android-toast

Or you can simply include the dist/android_toast.min.js and dist/android_toast.min.css files in your document.

JavaScript API

The constructor function accepts 3 options:

content sets the text to be displayed. <em></em> text will be highlighted in blue.

duration accepts an integer. The toast will disappear after the set duration. Defaults to 3000 (milliseconds).

position Either top or bottom. Determines the position of the toast. Defaults to bottom.

License

Check the MIT-LICENSE.txt file

Contributors

http://www.eTobb.com 's first Open Source contribution.

Developed by Jad Joubran @JoubranJad

Other contributors:

Patsy Issa

android-toast's Issues

Toast div blocks clicking underneath

The toast_container div blocks clicks.

I have a submit button, on submit it creates a new toast. The placement of the div just happened to be above the submit button when it's invisible.

I found out that the toast div should be removed once the animation finishes, but this does not work in IE.
Add HTML5 event:
toast_container.addEventListener('animationend', function () {
toast_container.parentNode.removeChild(toast_container);
});

Mouse events interference

Hi!
I found your Android toast very nice and started to use it. I experienced that it seemed to interfere with mouse event listeners I am using. After some search and trial, it seems like adding this line to your CSS resolves the probelm:

pointer-events:none;

E.g.

#android_toast_container{
  width:100%;
  position:fixed;
  bottom:12%;
  left:0;
  pointer-events:none;
}

this.show is not a function

Hi, just wanted to add simple toast message to my mobile web app but this happens

just added css and js files and call :

var toast1 = Android_Toast({content: 'Localizado por GPS.'});

thanks

With Ui router, problem if we switch the route

With ui router, impossible to display a toast and change the route at the same time.

Support for multiple Toast occurrences

I think it's great to have this feature as the native implementation of Toasts allow multiple occurrences.

Use object as parameter

About the Toast code, I would recommend the use of literal object as parameters, easy to implement and much easer to code with.

in the Class you would find something like that :

function Android_Toast(){

this.timeout_id = null;
this.duration = 3000;
this.content = '';
this.position = 'bottom';
for (var n in arguments[0]) {
this[n] = arguments[0][n];
console.log(arguments[0][n]); // please remove me ;)
}

}

the call would look like that :

var toast = new Android_Toast({content: 'Hello Fries', duration: 5000});

This code is ready to use with the current version, but could be easily done with prototyping :)