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

Andy

Andy

I’ve been working as a Web-Design / Coder for many years now, and thought it was finally time for me to give back some of the stuff I’ve learned over the years. I started this blog in November 2010, and have already added quite a few varying articles to the site. I’m always looking for new suggestions, so please visit the forum, or shoot me an email with suggestions!

WebsiteMore Posts

Categories: jQuery

Related Posts: