Hide flash message after some elapsed time instead of on click

[Jim Brouzoulis]

Hi everyone,

Can I easily customise the web2py.js file to automatically hide/fade out the flash message after some given time (like a few seconds) instead of clicking on it? If so, how? 

I have a feeling that the solution is probably not that complicated but my js-skills aren't very impressive :)

Regards

// Jim

[Massimiliano]

Hi Jim, 

I’m doing it in this way:

Edit static/web2py.js search for /*helper for flash messages*/

and add this command:

setTimeout(‘jQuery(".flash").fadeOut("slow")',5000);

just after:

if (flash.html()) flash.append('<span id="closeflash"> &times; </span>').slideDown();

Adjust 5000 that stands for 5 secods to your needs.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Massimiliano

[rajjm...@gmail.com]

On that note, how do we customize the flash? For example, lets say we want a much larger and brighter flash with css rule (brighter color), or have to display as soon as user log in on the center of the screen as an advertisement?

[Anthony]

The built-in flash mechanism involves the following:

1. Setting response.flash in the server-side code.
2. Insertion of {{=response.flash}} somewhere in the view.
3. Embedding {{=response.flash}} in a div with class "flash".
4. CSS rules defining how the "flash" class is displayed (defaults set in web2py.css and overridden in web2py_bootstrap3.css).
   
5. Javascript code in web2py.js determining the behavior of any div with a "flash" class.

If you simply want to change the display, you can add CSS rules that override those in web2py.css and/or web2py_bootstrap3.css (or edit those files). If you want to change the behavior, then you'll have to write some Javascript code, being mindful that it must work in conjunction with the code already in web2py.js.

If you need something more customized, then just be sure not to wrap {{=response.flash}} in a div with class "flash", as all the built-in CSS and Javascript code affects only divs with class "flash". Then you can implement your own styling and behavior.

Note, use of response.flash itself is not mandatory (you can pass a flash message to the view using any custom variable or response attribute you like), but it does provide some convenience as (a) during Ajax requests, response.flash will automatically get copied to a special custom HTTP header which can be read on the client, and (b) response.flash will get transferred to and from session.flash upon redirects.

Anthony

[Jim Brouzoulis]

Thank you very much for your help! (...and sorry for the late reply)

It didn't work at first but then I noticed a typo: the class should be '.w2p_flash'.

Regards

// Jim

[Marc Smith]

Hi,

I'm relatively new to JS but the strange quote character at the
beginning (I thought it was a back-tick, but doesn't appear it is) and
single quote at the end in that line don't look right to me -- is that
correct? I tried the code with Jim's change of using ".w2p_flash" but
it still doesn't work for me.

This is what the block of JS from web2py.js looks like currently:
--snip--
/*helper for flash messages*/
flash: function(message, status) {
var flash = $('.w2p_flash');
web2py.hide_flash();
flash.html(message).addClass(status);
if(flash.html()) flash.append('<span id="closeflash"> &times;
</span>').slideDown();
},
hide_flash: function() {
$('.w2p_flash').fadeOut(0).html('');
},
--snip--

I tried adding this line:
setTimeout(flash.fadeOut("slow"),5000);

But the message fades in and out in about a second, and in Chrome's
developer panel, I see a "(program):1 Uncaught SyntaxError: Unexpected
identifier" error.

Any help would be greatly appreciated.


--Marc

On Wed, Jul 13, 2016 at 6:41 PM, Jim Brouzoulis

[Scott Hunter]

You need single-quotes around 

flash.fadeOut("slow")

Otherwise, as you have seen, it gets executed immediately instead of after a delay.

[Marc Smith]

Thank you, that did the trick.

--Marc