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.
Sounds nice.. so does it go in the header? Write Comment Powered by AkoComment Tweaked Special Edition v.1.4.2 |
||||
Last Updated ( Monday, 23 June 2008 ) |
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