I am trying to show a simple flash message as demonstrated here with the following markup:
<p data-control="flash-message" data-interval="5" class="success">
This message is created from a static element. It will go away in 5 seconds.
</p>
I expect a flash message to appear after the page is loaded, but I am only seeing a static text showing the message. So it seems that some javascript or css has not been loaded properly. I checked with firebug and acknowledge that jquery.js, bootstrap.js, app.js, framework.js and framework.extras.js files have been loaded. Is there anything else I need to do in order for the flash message to appear?
These docs refer to the backend UI (which is not made totally obvious on that page, I admit, and others have been similarly confused by this). It seems you are trying to use this in a frontend page.
While the framework.js and framework-extras.js seem to be equally used in backend and frontend (if the {% framework %} or {%framework extras %} directive is appropriately placed in the template, for the frontend), exposing the same AJAX API in both worlds, there is a lot of CSS and JS for the backend UI that you do not access normally in the frontend, the bulk being contained in the modules/system/assets/ui/storm-min.js and modules/system/assets/ui/storm.css files under the October installation root.
I think the important bit of relevant CSS here is this (from modules/system/assets/ui/storm.css):
#layout-canvas .flash-message{display:none}
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10300;word-wrap:break-word;text-shadow:0 -1px 0px rgba(0,0,0,0.15);text-align:center;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.flash-message.success{background:#8da85e}
.flash-message.error{background:#cc3300}
.flash-message.warning{background:#f0ad4e}
.flash-message.info{background:#5fb6f5}
.flash-message button{float:none;position:absolute;right:10px;top:8px;color:white;outline:none}
.flash-message button:hover{color:white}
.flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important;-webkit-box-shadow:none;box-shadow:none}
The flash message logic that is executed on page load must be somewhere in the modules/system/assets/ui/storm-min.js, which, luckily also exists as a non-minified version modules/system/assets/ui/storm.js where you can find the line
=require js/flashmessage.js
and from there looking further in the referenced modules/system/assets/ui/js/flashmessage.js you find these lines towards the end:
// FLASH MESSAGE DATA-API
// ===============
$(document).render(function(){
$('[data-control=flash-message]').each(function(){
$.oc.flashMsg($(this).data(), this)
})
})
Voila!
So you could just include the whole storm.css and storm.js in your frontend page (I tried, it works - although the message is visible on load at first before being "flashed" and styled appropriately, so you'd need to make some adjustments), or from there you might be able to work out which parts of code you might need to extract and adjust to make it workable in the frontend. But I think it would be wiser to write stuff for this on your own for your frontend use instead of including big hunks of code that were designed meant to be integrated in the backend UI.
(It seems the whole $.oc.[...] JQuery stuff is scoped for backend use, but not totally sure on this.)