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(){
 tmjmosmsg=$$('div.message');
 if($type(tmjmosmsg[0])=='element'){
 var el=tmjmosmsg[0];
 el.setStyle('overflow','hidden');
 var h=el.getSize().size.y;
 fx = new Fx.Styles(el, {duration:900, wait:false});
 //scrol to message
 winScroller = new Fx.Scroll(window);
 winScroller.toElement($('header'));
 //delayed start, then remove the html element upon completion
 
(function(){
 
fx.start({
 
'margin-top':-1*h.toInt(),
 
opacity:0
 
 
}).chain(function(){el.remove();});
}).delay(2500);
 
 }
 
 };
 
 window.addEvent('load',function(){
 pload();
 }
 
 );
 </script>

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.

Are you a Joomla/PHP/Web developer? You may want to check our freelance marketplaces list.



Give us some social love (it really works now)!

Reddit! Del.icio.us! StumbleUpon! Yahoo! Swik!



Comments (6)
RSS comments
1. ..yeah!!16-11-2009 11:46

Hi there 
 
Crazy animation. Be sure you have here a vailid id from your template: 
winScroller.toElement($('header')); 
 
It is not always header!!! 
 
Also if you use beez or yootheme overrides check the xhtml code from you system message like mentioned above: 
tmjmosmsg=$$('dl#system-message'); 
 
Greetings 
Raphael from artd webdesign

2. Great09-11-2009 10:37

Great skript, Thanks!

3. Code28-08-2009 21:36

With the following code you can simply set the the display:none; for the messages after 3,5 seconds: 
 
 
function disablediv(dl){ 
var objDiv = document.getElementById(dl); 
objDiv.style.display="none";  

window.setTimeout("disablediv('system-message')",3500); /* Hier sind es 5sek. */ 
 
 
Not that cool, but simple. 
 
Another solution could be here: 
 
http://www.pa-s.de/php/codeschnipsel-Div-Box-Fadeout-Ausblenden-58.php

4. Joomla 1.5.9 Fix!08-03-2009 00:36

I needed to make a slight modification for it to work for me. 
 
change the line: 
 
tmjmosmsg=$$('div.message'); 
 
to: 
 
tmjmosmsg=$$('dl#system-message');

5. Great08-03-2009 00:23

Looks good!

6. Just installed script. Not working.07-08-2008 11:34

I just put the code in the element of my template and it doesn't seem to be working. 
 
Going to play around with it a little. But, I wanted to see what it's supposed to look like,

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
Name:
E-mail
Homepage
Title:
Comment:

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

Last Updated ( Thursday, 18 June 2009 )
 

Europe freelancer directory

Newsletter

Subscribe to TeachMeJoomla's newsletter
Name:
Email:


Auto tags

joomla system message

showing jooomla system message

message joomla

joomla change system message

joomla system message lightbox

sistem message joomla

joomla message box

joomla id="system-message"

joomla system messages style

styles joomla system messages

joomla system message types

joomla system messages

mootools joomla 1.0.15

joomla template system message where

mootools fx chain delay

classes to show system messages in joomla.15

system-message notice message fade joomla

joomla 1.5 "system message"

joomla picture animator

message roll joomla

mootools scroll messages

how to change "system-message" in Joomla