A CakePHP jQuery fade out flash success message

By Alvin Alexander. Last updated: June 4, 2016

CakePHP flash fade out success messages: If you'd like to show fade out success messages in your CakePHP applications using jQuery, like the ones currently used by applications such as Twitter and Facebook, I thought I'd share the formula I came up with this weekend. While it includes touching a few different files, it's pretty easy, and once you've done the basic setup work you can display CakePHP fade out success messages in all of your web pages, and web applications.

I'm just going to run through the setup quickly. If you need more information please leave a comment below.

1) The CakePHP controller

You usually want to display a jQuery fade out success message when a user has added or edited something, so in your CakePHP controller you want to set a Session flash "success" message like this:

$this->Session->setFlash(__('Your thing has been saved', null), 
                            'default', 
                             array('class' => 'flash-message-success'));

The only real magic there is setting the CSS class of the message, otherwise it's a normal CakePHP flash message.

2) The CakePHP CSS

Speaking of CSS, in your CakePHP CSS file, create your success message class. It can be simple like this:

/* this uses the same elements as the default 'message' class */
div.flash-message-success {
  color: white;
  background: none repeat scroll 0 0 #66cc66;
}

Or more complicated like this, where I duplicate all the settings of the default CakePHP message class, with a few changes:

/* this uses the same elements as the default 'message' class */
div.flash-message-success {
  color: white;
  background: none repeat scroll 0 0 #66cc66;
  clear: both;
  font-size: 140%;
  font-weight: bold;
  width: 630px;
  margin: 0 0 1em 6px;
  padding: 5px;
  padding-left: 0.4em;
}

3) Your CakePHP view

In your CakePHP view file you need to show the Session flash message, like this:

<?php 
  echo $session->flash(); 
?>

4) Your CakePHP layout file

In your CakePHP layout file you need to include a reference to jQuery. With a lot of other things stripped out, that will look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Welcome to Sleetmute.com</title>
  <?=$html->css('cake.generic');?>
  <?php echo $scripts_for_layout ?>
  <?php
    // include jquery and my javascript file
    echo $this->Html->script('jquery-1.4.4.min');
    echo $this->Html->script('sleetmute');
  ?>
</head>
<body>

<div id="main">

  <?php echo $content_for_layout ?>

  <?php
    echo $this->element('footer'); 
    echo $this->Js->writeBuffer(); // write cached scripts 
  ?>

</div>

</body>
</html>

5) The CakePHP jQuery fade out animation

And finally, to achieve the jQuery fade out animation effect, you'll put this code in your Javascript file, which as you saw in the previous code is named "sleetmute.js":

$(document).ready(function() {
  // fade out flash 'success' messages
  $('.flash-message-success').delay(1000).hide('highlight', {color: '#66cc66'}, 1500);
});

CakePHP jQuery fade out success message

If you follow these steps, you should be able to create a nice CakePHP jQuery fade out effect, so when your users enter some data, a flash success message will appear, and then fade out.

php

css

flash

javascript

message

A CakePHP jQuery fade out flash success message

CakePHP jQuery fade out success message

books by alvin