April 1st, 2009
What I wanted to achieve:
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!
Posted in Javascript, Mootools | No Comments »
November 18th, 2008
One of our projects required highlighting of the current navigation tab. So naturally, I googled and here’s what I found:
- 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:
- Get the Page’s name. In this case, our URL was structured in this way, http://website.com/category1/section1/page-name
- Set IDs to each of the sidebar navigation links, to match the page names.
- 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>
Posted in Javascript, PHP, XHTML/CSS | No Comments »