Element / Flash Message

This element shows a flash message at the top of the browser.

by chilipeppr

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="com-chilipeppr-elem-flashmsg" data-container="body" data-toggle="popover" data-placement="auto"></div>

CSS

.com-chilipeppr-elem-flashmsg .popover .arrow {
    display:none;
}

.com-chilipeppr-elem-flashmsg .popover {
    max-width: none;
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-elem-flashmsg"], function (fm) {
    console.log("test running of " + fm.id);
    //$("body").height("100%");
    //$("body").width("100%");
    $("body").css("background-color", "#eeeeee");
    //$(".com-chilipeppr-elem-flashmsg").height("200px");
    //$(".com-chilipeppr-elem-flashmsg").width("200px");
    fm.init();
    chilipeppr.publish("/com-chilipeppr-elem-flashmsg/flashmsg", "title from pub", "body from pub", 1000);
    chilipeppr.publish("/com-chilipeppr-elem-flashmsg/flashmsg", "title2 from pub", "body2 from pub<br/>next line<br/>3rd line", 10000);
    
    setTimeout(function () {
        chilipeppr.publish("/com-chilipeppr-elem-flashmsg/flashmsg", "", "body3 from pub");
    }, 3000);

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-elem-flashmsg", ["chilipeppr_ready"], function () {
    //console.log("Inside of define for com-chilipeppr-elem-flashmsg");
    return {
        id: "com-chilipeppr-elem-flashmsg",
        url: "http://fiddle.jshell.net/chilipeppr/d64kM/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/d64kM/",
        name: "Element / Flash Messsage",
        desc: "This element shows a flash message at the top of the browser.",
        publish: null,
        subscribe: { 
            "/com-chilipeppr-elem-flashmsg/flashmsg" : "Shows a flash message in the browser over everything for a brief moment. You can pass in a title, body, and a delay in ms (optional). For example, call chilipeppr.publish('/com-chilipeppr-elem-flashmsg/flashmsg', 'my title', 'my body', 5000); Or to just get a body call chilipeppr.publish('/com-chilipeppr-elem-flashmsg/flashmsg', '', 'my body', 5000);"
        },
        queue: [],
        init: function () {
            //console.log("init called");
            chilipeppr.subscribe("/com-chilipeppr-elem-flashmsg/flashmsg", this, this.showQueue);
        },
        showQueue:...