I wanted a disappearing notification message that pops up and fades out when a button is pressed.

What you need:

Mootools Core

How I did it:

Read up on Apress Mootools Essentials for about an hour and experimented on it.

1. Include mootools  and the script in the head.

<script src="mootools-1.2.1-core.js"></script>

<script type="text/javascript">

    function blink() {
        $('blinker').set('opacity',1);
        $('blinker').fade('out');
    }

    window.addEvent('domready',function(){
        $('blinker').set('opacity',0);
    });

</script>

2. Type in the notification message and the button

<div>
    <p id="blinker">This is a disappearing notification message</p>
</div>

<button onclick="blink()">Poink</button>

That’s it folks!

• http://www.alistapart.com/articles/keepingcurrent
• http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
• http://www.websiteoptimization.com/speed/tweak/current/

However, none of them was the solution to what we exactly needed because of our file structure. We had a unique sidebar navigation include (nav.inc.php) for every subdirectory.

The ALA solution was ugly, they inserted php snippets in every <li> entry. Hicksdesign’s solution was ok, but it required coding in a unique ID on every individual page, which was not a good idea for us.

So we came up with our own solution.

Here’s what we did:

1. Get the Page’s name. In this case, our URL was structured in this way, http://website.com/category1/section1/page-name
2. Set IDs to each of the sidebar navigation links, to match the page names.
3. Invoke javascript to set class=”selected” to the navigation link where the current page is on.

Here’s the Javascript code that was used:

<script language="javascript">
function set_current_nav()
{
	document.getElementById('<?=$current_page?>').setAttribute('class','selected');
}
set_current_nav();
</script>