Animating Joomla's system messages with MooTools

Monday, 23 June 2008

Here's a simple way to render an animation when your users get a system message. The Javascript searches for an element with the ".message" class, it waits 2 and a half seconds, then it fades and shrinks the message away.

To make sure the message is in sight, WinScroller scrolls to the element with the 'header' id. You need to modify this id to suit your templates's header or main column. 

The message is passed as a request variable, 'mosmsg'.

This code snippet should be pasted into the head section of your template (between <head></head> tags)

<script type="text/javascript" >
 var tmjmosmsg,fx;
 function pload(){
 var el=tmjmosmsg[0];
 var h=el.getSize().size.y;
 fx = new Fx.Styles(el, {duration:900, wait:false});
 //scrol to message
 winScroller = new Fx.Scroll(window);
 //delayed start, then remove the html element upon completion
     }).chain(function(){el.remove();});  }).delay(2500);   

Make sure you loaded mootools v.1.11 before this code. Joomla 1.5 loads it automatically for you, Joomla 1.0.15 needs to specifically load mootools trough a <script src="..."></script> tag.

The file you need to alter is located at templates/your_current_template/index.php.

 The script is installled on this site, you'll notice it when posting comments.


Add this page to your favorite Social Bookmarking websites
Reddit!! StumbleUpon! Yahoo! Swik!

Comments (1)
RSS comments
1. Nice..27-06-2008 17:04

Sounds nice.. so does it go in the header? :p

Write Comment
  • Please keep the topic of messages relevant to the subject of the article.
  • Please don't use comments to plug your web site. Links are rel='nofollow'-ed
  • Please refresh the page if you're having trouble with the security image code

:) :grin ;) 8) :p
:roll :eek :upset :zzz :sigh
:? :cry :( :x
Code:* Code

Powered by AkoComment Tweaked Special Edition v.1.4.2

Last Updated ( Monday, 23 June 2008 )


Subscribe to TeachMeJoomla's newsletter

Joomla books

Auto tags

mootools joomla

mootools delay

mootools for joomla

mootools joomla 1.015

mootools delay fx.styles

script tag in joomla

system-message joomla 1.5

joomla mootools 1.0.15

joomla 1.0.15 loading mootools

mootools 1.0 joomla

mootools joomla 1

joomla system-message

mootools loading message

joomla system styles

mootools and joomla 1.0