Take a look at some of the articles I’ve written. (feel free to comment )

I’ve written another MooTools plugin (class) for facilitating the hiding of various help messages you may have scattered throughout your app.

Download the script and demo
View the demo
Download the MooTools framework

What does it do?

The basic premise is that you have a help message on one or more of your site’s pages which are incredibly useful the first few times the user visits that section. However, once the user understands how that page works, that once useful help message is now just in the way. So to solve this problem you might put a “Close this message” or “Hide this message” link in there so that your users can get it off their screen since it’s no longer needed. That’s where HideThisMessage comes in.

HideThisMessage finds all the elements with the className you specify, hides them (with or without a snazzy animation) when the user clicks on the link within that element with the className you specify, and remembers via cookies which elements should be shown and which should be hidden/removed. Each element needs its own unique id and the user must have cookies enabled.

Linking the required JavaScript files

You need to link the appropriate JavaScript files in the head of your document. HideThisMessage requires MooTools 1.2 or MooTools 1.11. I’ve created classes for both versions. It also requires the Hash.Cookie Plugin for MooTools which i’ve included in my download package for your convenience. Place the following lines before the closing head tag in the top of your document.

<script src="/path_to/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="/path_to/hidethismessage.min.js" type="text/javascript" charset="utf-8"></script>

Make sure you call the hidethismessage script AFTER mootols or it won’t work

Initializing HideThisMessage

Now you need to call the HideThisMessageclass passing to it the variables needed to get the plugin working. HideThisMessage takes 2 required and 1 optional arguments.

• elementClass: REQUIRED (String)(default: ‘hideWindow’) – The ClassName of the element that is to be hid.
• hideBtnClass: REQUIRED (String)(default: ‘hideWindowBtn’) – The ClassName of the link contained within elementClass that, when clicked, hides the window.
• animate: OPTIONAL (Boolean)(default: true) – Whether or not the window animates closed when the hideBtnClass link is clicked.

Now lets create a new instance of our HideThisMessage class.

         window.addEvent('domready', function(){
            var myMessageHider = new HideThisMessage({
               elementClass: 'hideWindow',   
               hideBtnClass: 'hideWindowBtn',
               animate: true                 
            });
         });

Public Methods

HideThisMessage only has 1 public method

• reset() Resets the hidden status of all hidden windows.