jQuery plugin – FlashingText v1
February 13th, 2012
I decided to finally jump in the deep end and write my own jQuery plugin
Its nothing too complex… it will let you assign a class to text/div blocks, and “flash” the background/font color every xx milliseconds. Its VERY simple to use. It works in IE 6, 7, 8 , 9 etc, FireFox 2+, Chrome and Safari (I havn’t tested any more, but they should all be fine). As always IE was a sod to get working… ie. the rgb() stuff comes out as rgb(123,123,123) in IE 8 and lower… but in Chrome, FF, IE 9+ it comes as rgb(123, 123, 123) – notice the extra spaces. Anyway, enough “techno” junk … please let me know how it works for you
You can see an example here:
http://www.mywebsitedesignersblog.com/examples/flashing/
First of all, you can download the files from here. The script is VERY lightweight (1kb for the minified version, or 2kb for the normal version).
To run this plugin you need to first of all setup jQuery , and then also include this plugin:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.flashingtext.js"></script>
Then add the following script:
$(document).ready( function() {
$('.flashing').flashingtext( { 'default': '#ffffff', 'flashing': '#00ff00', 'what' : 'background', 'interval': 1200 } );
$('.flashing2').flashingtext( { 'default': '#ff0000', 'flashing': '#000000', 'what' : 'text', 'interval': 1300 } );
});
Ok, so lets break this down:
$('.flashing2')
This basically tells the plugin that we want to make any links with class=”flashing2″ in them run through this plugin. Next we have our options:
{ 'default': '#ff0000', 'flashing': '#000000', 'what' : 'text', 'interval': 1300 }
default: The color the text will “revert” back to after a flash
flashing: A hex value of the color you want the text/background to change to
what: Can be either “background” or “text”.
interval: time (in milliseconds) for the “flashing” to follow
Thats pretty much it! If you wanna send a donation for this
Categories: jQuery


