techatspree / jquery-toastmessage-plugin

A JQuery plugin to 'toast' messages
Apache License 2.0
373 stars 127 forks source link

Impossible to close a note on touch-screen-based browser if an element with <a> defined is under the notes's X icon. #1

Open dvdotsenko opened 13 years ago

dvdotsenko commented 13 years ago

Hi.

Tested this on Android's browser on http://akquinet.github.com/jquery-toastmessage-plugin/demo/demo.html . Tapping on (X) on "sticky" notes activates underlying element's <a ..> link.In this case, "Fork it on GitHub"'s link is triggered instead of closing the note.

Seems touch-based browsers are seeking out nearby tags and interpreting the tap as tap on that. Suggest adding A tag to the (X).

daniel-tonn commented 13 years ago

Hi,

we just tried the demo page on the following "touch" devices without any problem:

I was able to close the toastmessage on any on this devices within the demo page. May be you just "miss" the right clickspot ?

best regards, Daniel

dvdotsenko commented 13 years ago

You are right. After tapping the screen of my Samsung Galaxy S (2.1) for quite some time, i figured out that I have to tap exactly in certain place to make the note go away. Tap a tad to the side and the browser is eager to interpret my tap as a tap on a nearby link.

After some training, i got it down to "i need on average about 3 taps to hit the (x) right"

Would be nice to make the clickable area bigger or actually make it a link with onclick event that calls the close. Browser would naturally gravitate to the close button, and not surrounding elements.

daniel-tonn commented 13 years ago

I will have a look into that approach. Thank you.