Extends bulma.io CSS framework with a short-lived notification message that slides up from the bottom of the screen. Useful for showing user that a change has occurred on the page. Requires jQuery.

bulma_quick_notification.js

/**
 * display a quick notification box that slides up from the bottom for a few seconds
 */
function quickNotice(message,cssClass,timeOnScreen)
{
    cssClass = (cssClass) ? cssClass : 'is-success';
    timeOnScreen = (timeOnScreen) ? timeOnScreen : 3000;
    
    var html = '<div id="quickNotice" style="position: absolute; z-index: 100; width: 100%" class="notification has-text-centered has-text-weight-semibold '+cssClass+'">';
        html+= message;
        html+= '</div>';
    
    $('body').append(html);
    var notice = $("#quickNotice"),
        startPosition = (notice.innerHeight()) * -1;
        notice.css({'bottom':startPosition+'px'});
        notice.animate({bottom:0},300);
        setTimeout(function(){
            notice.animate({bottom:startPosition+'px'},500,function(){
                notice.remove();    
            });
        },timeOnScreen);
}