SOW : Toasts

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.toast.js

Alerts Defaults

Test & Generate YOUR GENERATED CODE


// JS Code
$.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-center', 0, true);


<!-- on page load, via html code -->
<div class="hide toast-on-load" 
  data-toast-type="danger" 
  data-toast-title="" 
  data-toast-body="Body Text Here" 
  data-toast-pos="top-center" 
  data-toast-delay="0" 
  data-toast-fill="true"></div>

                  
                    <!--
                      
                      Toast on page load
                      data-type   = '', success, danger, warning, info
                      data-title  = toast title   (optional)
                      data-body   = toast body  (required)
                      data-pos    = top-start, top-end, bottom-start, bottom-end, top-center, bottom-center
                      data-delay  = autoclose in ms
                      data-fill   = background color fill [true|false]

                    -->
                    <div class="hide toast-on-load"
                      data-toast-type="danger" 
                      data-toast-title="" 
                      data-toast-body="Ajax navigation enabled! Yay!" 
                      data-toast-pos="bottom-center" 
                      data-toast-delay="4000" 
                      data-toast-fill="true"></div>

                  
                    /*
                      type   = '', success, danger, warning, info
                      title  = toast title   (optional)
                      body   = toast body  (required)
                      pos    = top-start, top-end, bottom-start, bottom-end, top-center, bottom-center
                      delay  = autoclose in ms
                      fill   = background color [true|false]
                    */  $.SOW.core.toast.show(type, title, body, pos, delay, fill);

                    // destroy
                    $.SOW.core.toast.destroy();


                    // ------------------------------------------------------------------------------
                    // VARIOUS EXAMPLES
                    // ------------------------------------------------------------------------------
                    // 1. NO AUTOHIDE
                    $.SOW.core.toast.show('', 'Default', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('danger', 'Error', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('success', 'Success', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('warning', 'Warning', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('info', 'Info', 'Body Text Here', 'top-end');

                    // 2. AUTOHIDE
                    $.SOW.core.toast.show('', 'Default', 'Body Text Here', 'top-end', 3000);
                    $.SOW.core.toast.show('danger', 'Error', 'Body Text Here', 'top-end', 3000);
                    $.SOW.core.toast.show('success', 'Success', 'Body Text Here', 'top-end', 3000);
                    $.SOW.core.toast.show('warning', 'Warning', 'Body Text Here', 'top-end', 3000);
                    $.SOW.core.toast.show('info', 'Info', 'Body Text Here', 'top-end', 3000);

                    // 3. NO TITLE
                    $.SOW.core.toast.show('', '', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('success', '', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('warning', '', 'Body Text Here', 'top-end');
                    $.SOW.core.toast.show('info', '', 'Body Text Here', 'top-end');

                    // 1. NO TITLE + BACKGROUND FILL
                    $.SOW.core.toast.show('', '', 'Body Text Here', 'top-end', 0, true);
                    $.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-end', 0, true);
                    $.SOW.core.toast.show('success', '', 'Body Text Here', 'top-end', 0, true);
                    $.SOW.core.toast.show('warning', '', 'Body Text Here', 'top-end', 0, true);
                    $.SOW.core.toast.show('info', '', 'Body Text Here', 'top-end', 0, true);