Fade
Contents |
[edit] Fade Anything Technique
The Fade Anything Technique http://www.axentric.com/aside/fat/ allows you to fade any element by id on your page from colour X to colour Y or from colour X back to the original CSS value.
Integration is very easy, which we like! :)
[edit] Installation
[edit] Download files
Firstly, remember that FAT only works on elements that have an id as an attribute. If you miss the id off, and only apply the class it won't work. Grab the javascript file http://www.axentric.com/aside/fat/fat.js and save it to your prefered directory.
[edit] Header code
Add to inbetween your <head></head> tags:
<script type="text/javascript" src="fat.js"></script>
And make sure the src is pointing to the write URL etc.
[edit] Text html
Now test with the following code in your <body>
<div> <p id='someid' class='fade'>Some text to using the default colours as defined in the .js file</p> <p id='someid' class='fade-FF0000'>Some text to from red.</p>
When you load/reload the page these paragraphs (or divs if you apply them there) will fade colour.
[edit] xajax usage
You can make xajax calls directly to trigger these effects:
// Fat.fade_element(id, fps, duration, start colour, end colour)
$objResponse->addScript("Fat.fade_element('someid', 60, 1000, '#FF0000', '#DDDDDD');");
Define fps (frames per second) - I've tried 30 and 60 and its very smooth. If no end colour is defined, the script gets the default CSS value of the background and fades to it.
Also this can be used on the onfocus and onclick etc events through a javascript or xajax call, so when a user tabs into the field it highlights to a color and fades out.
[edit] Examples
[edit] xajax edit function
Reuseable function to edit based on the element.
PHP Function
function x_fade($id,$fcolor,$tcolor,$dur) {
$objResponse = new xajaxResponse();
$objResponse->addScript("Fat.fade_element('$id', 60, '$dur', '$fcolor', '$tcolor');");
return $objResponse;
}
HTML/smarty template
Username<br />
<input type="text" name="username" id='username' onfocus="xajax_x_fade('username','#00dd00','','')" /><br />
Password<br />
<input type="password" name="pword" id='password' onfocus="xajax_x_fade('password','#00dd00','','')" /><br />
Of course this could easily be done without using xajax, which just makes it a bit slower and less responsive. However it can also be used with something like onblur to check/validate forms before they are submitted (username availability for registrations, for example) and highlight problematic fields in a fancy way.
Plese post further examples if you find this useful!
Full credits to the FAT author http://www.axentric.com/
