Making flash messages disapear, with YUI.

Ok, so we all know how useful those flash messages are that cakePHP throw at us, “you’ve done it wrong, try again”. Well as much as I like them I don’t want to be reminded of my error untill I go to a different page. The answer is to make them disapear.

Using the YUI Animation Utility, we can simply make the div containing the message close to nothing. First you need to make sure your $session->flash() is wrapped in a div if it appears.

<?php
if ($session->check('Message.flash'))
 {
 echo '<div id="flash_message">';
 $session->flash();
 echo '</div>';
 }
?>

Now we have a div with an id that we can use and abuse! The YUI Animation Utility alows us to manipulate, move and basicaly do as we wish with most page elements. But first we need to load it onto the page, for this I have used the YUI Loader, because we only want to execute the code and load in the animation file if the message is displayed. To use the YUI Loader we need to include it in our layout.

echo $javascript->link('http://yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js');

To keep things tidy I have put the code required into a separate file “flash_message.js”.

// Instantiate and configure YUI Loader:
(function() {
  var loader = new YAHOO.util.YUILoader({
 // This tells Loader where to find the files, if empty it uses Yahoo! hosted files
    base: "",
    require: ["animation"],
    loadOptional: false,
    combine: true,
    filter: "MIN",
    allowRollup: true,
    onSuccess: function() {

        var attributes = {
         // This is what we are changing
            height: { to: 0 }
        };
   // We are animating "flash_message" to these "attributes"
     var anim = new YAHOO.util.Anim('flash_message', attributes);
//This will start the animation function when the element with an id of "content" is ready so it is not hidden before it is visable
        YAHOO.util.Event.onContentReady("content",function(){
         // This function delays everything
            window.setTimeout(function(){
             //This is where our animation is actually started
                anim.animate();
         // This is the delay in miliseconds
            },5000);
        },anim);          

    }
  });

// Load the files using the insert() method.
loader.insert();
})();

To use this code we use the javascript helper and so it only apears if the flash message is there we put it in the if statement.

            <?php
            if ($session->check('Message.flash'))
                {
                echo $javascript->includeScript('flash_message');
                echo '<div id="flash_message">';
                $session->flash();
                echo '</div>';
                }
            ?>

The most important thing to do now is make sure the text disapears with the div, so we just put this into our css file or in the <head> tags of the layout file.

#flash_message {
    overflow:hidden;
}

That should be it, you can experiment by adding different attributes for the animation, like background colour. If you want a different delay you just need to change the value from “5000” (5 seconds) to any value you wish, for an quick conversion you can use this site.

Happy Baking

One thought on “Making flash messages disapear, with YUI.

Leave a Reply

Your email address will not be published. Required fields are marked *