jump to navigation

Cool flash effect February 11, 2006

Posted by rossoft in CakePHP.

I show the flash messages by setting the flash session variable, then in my layout I have to show that message.

I wanted to display that message with the highlight effect (Effect.Highlight) after the page is loaded.

1. create the file /webroot/js/highlight.js

function highlight_message()
var id="flash_message";
var elemento=document.getElementById(id);
if (elemento.innerHTML.length>0)
new Effect.Highlight(id);
Event.stopObserving(window, 'load', highlight_message);
Event.observe(window, 'load', highlight_message, false);

This registers a window.onLoad function for highlighting the message after the page is loaded.

2. We will overwrite the session component (it is a little hack)

Change the following code from the file session.php of /app/controllers/components/session.php (if this file doesn’t exists, copy it from /cake/controllers/components

function setFlashError($flashMessage)
$this->write('Message.flash_error', $flashMessage);
function flash()
echo '
echo '
echo '
return false;


There are 2 changes. First, flash function will return always a div with id=”flash_message”. It will be empty or not.
Second, a new function setFlashError($flashMessage) for setting a error message (this will change the style of the error in the view by changing the class atribute from Message.flash to Message.flashError)

3. Put this in your layout file (by default the file is /app/views/layouts/themes/default.thtml) where you want to place the error message.

if (isset($this->controller->Session))	$this->controller->Session->flash();
else echo '<div id="flash_message"></div>';

4. Include the component ‘session’ in your controller

5. Use these functions in your controller
$this->Session->setFlash($mensaje); //for a success message
$this->Session->setFlashError($mensaje); //for an error message



1. fraisouille - August 16, 2006

Hey we need some .js library to do this, don’t we 😉
hmm…prototype.js and effects.js ? 😀

2. hijjan - May 20, 2007


3. retrete - June 26, 2008


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: