Easy Unobtrusive Toaster Plugin For jQuery - gg-notif

gg-notif is a simple, easy jQuery notification plugin to create unobtrusive, auto-dismiss, CSS3 animated, Material Design inspired toast messages that are configurable via HTML data attributes.

More features:

• Supports HTML content.
• Custom positions.

How to use it:

1. Put jQuery JavaScript library together with the garessi-notif.css and garessi-notif.js into the html file.

<link rel="stylesheet" href="src/garessi-notif.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="src/garessi-notif.js"></script>

2. Create trigger buttons with the following data attributes to toggle the toast messages.

• data-content: Custom toast message. Supports HTML.
• data-placement: top-left, top-center, top-right, bottom-right, bottom-center, bottom-left

<button data-content="effect top left" 
        data-placement="top-left" 
        id-notif="topleft1">
        Top left
</button>

<button data-content="effect top center" 
        data-placement="top-center" 
        id-notif="topcenter1">
        Top center
</button>

<button data-content="effect top right" 
        data-placement="top-right" 
        id-notif="topright1">
        Top right
</button>

<button data-content="effect bottom left" 
        data-placement="bottom-left" 
        id-notif="bottomleft1">
        Bottom left
</button>

<button data-content="effect bottom center" 
        data-placement="bottom-center" 
        id-notif="bottomcenter1">
        Bottom center
</button>

<button data-content="effect bottom right" 
        data-placement="bottom-right" 
        id-notif="bottomright1">
        Bottom right
</button>

---

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