Toast notifications, now in the browser

Anyone who has used the mobile application at least once, I think, is familiar with Toast-notifications. Yes, it is just unexpected pop-up messages that attract your attention when you are passionate about the phone in some kind of task.

On the net you will find thousands of ready-made solutions on how to make Toast notifications in Android. But there was no ready, simple solution out of the box for web browsers. The first thought was to take some BOX-plugin and adapt it. However, such plugins are clearly not capable of simulating the behavior of Toast notifications.
')
Considering this, a small JS-library was created, imitating Toast-notifications in the browser. I hope someone will find it useful.

In order for Toast notifications to appear on your page, you must include only two things in its contents.

First, connect the library script.

<script src="js/toastjs.js"> </script> 

Secondly, at the very end of the page, or where you prefer, insert an empty div.

 <div id="toastjs"></div> 

The library will work with this area in the future. Of course, it would be possible to force the script itself to generate this area. But this is extra code and unnecessary DOM operations.

All ... CSS code is already registered in java scripte. And jQuery ... How can you be loved without her? It turns out that you can without it.

To call Toast notifications, we call a simple function, for example:

toast ('tlc', 'Notification Text', 3);

The first parameter of the three Latin letters, we indicate the position of Toasta on your page. The first letter determines the vertical position: T - at the top of the page, C- at the center of the screen, B- at the bottom of the page. The second letter determines the horizontal position: L, C, R, left, center and right, respectively, and the letter J, in this case, Toast stretches across the entire width of the screen. The third letter defines the alignment of the text inside the Toast notification: L, C, R, J. Anyone who has ever installed texts will understand what's what.

The script determines the position of the Toast notification based on the current size of the visible screen area, while the notification itself is centered, if possible, relative to the specified screen area.

Letters to indicate the location. Toast notifications are Latin. You can write large, and can be small. Who is more convenient.

The second parameter specifies the text Toast notification. Restrictions on its contents were not specifically introduced, anyone can conduct experiments on the insertion of various html code into this parameter (pictures, by the way, are inserted with a bang). However, in this case, the clarity of the location of the Toast notification on the screen itself is not guaranteed.

Do not insert into the Toast notification the contents of the first volume of War and Peace. A maximum of two or three lines, a visitor to your site will simply not have time to analyze.

And finally, in the third parameter, specify in seconds the duration of the Toast notification display, including the animation time. The duration of a toast notification can be from three (if less is indicated, time equals to three) to ten (if more is indicated, time equals to ten) seconds.

At the same time, you can display several Toast notifications on the screen. For processing, a general timer is used for all Toast notifications, which is currently on the screen. If the display areas of Toast notifications partially or completely coincide, then a kind of Toast sandwich is obtained, with the last called notification located above the earlier called one.

If someone didn’t like the appearance of Toast notifications, then just go to the code and fix the styles on your own.

An example can be found here .
The library itself can be downloaded here .