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.
Hi there Great skript, Thanks! With the following code you can simply set the the display:none; for the messages after 3,5 seconds: I needed to make a slight modification for it to work for me. Looks good! 6. Just installed script. Not working.07-08-2008 10:34 I just put the code in the element of my template and it doesn't seem to be working. Write Comment |
||||
Last Updated ( Thursday, 18 June 2009 ) |
Joomla stuff
Newsletter
Auto tags
joomla system message
joomla system messages
showing jooomla system message
animate joomla system messages
message joomla
system message joomla
joomla system message lightbox
change system messages joomla
joomla messages
joomla get system message
joomla change system message
joomla system message in lightbox
mootools joomla 1.0.15
mootools message
joomla message box
joomla system message mootools
joomla system messages in LightBox
animated system messages joomla
sistem message joomla
joomla id="system-message"
system-message + joomla
joomla system messages style