jadjoubran / android-toast Goto Github PK

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

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

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

thanks

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);
});

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 :)

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

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;
}