Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
/**
* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment