O'Reilly

MooTools Gone Wild: Element Flashing

By on  

If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention, of course. That got me to thinking -- I should go download some what about when we want a user's attention to focus on a specific element on the page without using cheesy graphics? Armed with the latest MooTools trunk and a dream, I've implemented flash(), which you can use on any element on the page.

The XHTML

<div id="flash-me">
	<a href="javascript:;" id="flash-link">Click here</a> to make me flash!
</div>

The above is just some sample XHTML -- you can make your XHTML code look however you want.

The MooTools JavaScript

Element.implement({
	flash: function(to,from,reps,prop,dur) {
		
		//defaults
		if(!reps) { reps = 1; }
		if(!prop) { prop = 'background-color'; }
		if(!dur) { dur = 250; }
		
		//create effect
		var effect = new Fx.Tween(this, {
				duration: dur,
				link: 'chain'
			})
		
		//do it!
		for(x = 1; x <= reps; x++)
		{
			effect.start(prop,from,to).start(prop,to,from);
		}
	}
});

You feed the flash function 2-5 parameters:

  • From: The color you want the element to flash to first.
  • To: The color you want the element to flash to next.
  • Reps: Number of times to repeat the flash.
  • Property: Property to flash. Background color works best.
  • Duration: The duration of the color change

Slick and simple!

The Usage

/* flash on click */
$('flash-link').addEvent('click', function () {
	$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});

/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
	//make the ajax call
	var req = new Request({
		method: 'get',
		url: 'element-flashing.php',
		data: { 'do' : '1' },
		onRequest: function() {  },
		onComplete: function(response) {
			$('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); 
		}
	}).send();
	
});

/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
	var scroller = new Fx.Scroll(window, {
		onComplete: function() {
			$('scroll-to-me').flash('#fff','#fffea1',10);
		}
	}).toElement('scroll-to-me');
});

There are three examples above. The first makes an element flash right when it's clicked. The second flashes when an AJAX request is complete. The third scrolls down to an element on the page and flashes upon arrival.

Track.js Error Reporting

Recent Features

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

  1. Please stop. Forget the ability to do this and move along. We don’t need flashing… we finally got rid of flashing text in mark-up! :)

  2. @Marc: Close, but not the same thing.

  3. I think the flashing going on here is still easy on the eyes, I wouldn’t mind this.

    Checkout http://www.mootools.net 1.2 got out of beta, oh yeah!

  4. Thanks for the great tutorial! I’m currently developing a new site and I opted for MooTools over jQuery and I have to admit, I was beginning to regret it. It seemed like there was so much more documentation for it than MooTools. Every day I was seeing 2 or 3 new tutorials for jQuery and none for Moo.

    You’re making things much easier than me, thanks! Keep up the great work!

  5. @Randy: Just like Journey said, “Don’t Stop Believin'”! jQuery has been adopted by the Designer community, which is fine. I’m a developer so I love the MooTools syntax and simplicity. I’m fighting for the Moo!

  6. Chris

    Might want to add a few flags to the flash to denote whether the element is flashing already or not, so that when it gets re-activated (eg: clicking the “click me” on the sample page several times very quickly) the element doesn’t go into some kind of epileptic fit.

  7. @Chris: Not a bad idea Chris.

  8. you might consider writing this as a class that an element can implement rather than just an implement, will be quite a bit more flexible that way.

  9. MrKistic

    Pretty good but I have one issue with it: Rod was the best rocker, but only between ’69 & ’74 ;)

  10. Great! Although…
    I already packaged it into a class – which is sadly not yet MooTools 1.2 based but you can check it out here: MooTools Pulsate class.

    Interested in a 1.2 version? :)

  11. Doesn’t work in mootools 1.1.

    Yeh, I now see most of your articles are written for 1.2, but it took me a good 15 mins before I worked out this wasn’t compatible for 1.1 – might be worth stating “for 1.2″ somewhere or in the title?

    Good tutorial, though.

  12. Hey man, just found your blog, fellow Mootools developer here (among other things). Some great inspiration on your site, I will be coming back here. I implemented your tutorial and I’m using a similar method minus one parameter. Basically I do getStyle(‘background-color’) and just flash to that, so you don’t have to know the item’s original background color to flash it.

  13. If I’m not mistaken, the code above will cause some sort of memory leak? Because every time you click on the link, a new Fx.Tween object is created.

  14. Is there a way that i could remove the effect while its still flashing ? What would i have to add to the code so that i could disable the effect whenever i wanted? Im new to mootools but am already loving it , so please help :)

  15. Gui

    Any idea how to add eg border-color to flash as well…

  16. kkrishieee

    Hi david,
    As im new to Mootools, the above example is very useful for me.flashing the background. I have implemented the same thing in my project. The problem im facing is how to stop that flashing.
    For Example:
    1) One side of the page flashes for 5 seconds.
    2) After 5 seconds the other side page has to flash for 5seconds.
    3) vice-versa.

  17. kkrishieee

    Hi david,
    As im new to Mootools, the above example is very useful for me.flashing the background. I have implemented the same thing in my project. The problem im facing is how to stop that flashing.
    For Example:
    1) One side of the page flashes for 5 seconds.
    2) After 5 seconds the other side page has to flash for 5seconds.
    3) vice-versa.

    Im picking my hair since long time.please can you help me out.
    Thanks in advance.

  18. very interesting blog

  19. Jens Lehmann

    Sehr interessantes thema! besucht meine webseite http://www.ruralfinca.net

  20. Anees Iqbal
     
    

    David, Your comment parsing plugin sucks, so added some extra spaces.

    • Anees Iqbal

      Okay, I swear I added javascript: in the href attribute, but it removed it. (facepalm)

    • Anees Iqbal

      and it also added rel="nofollow" to it. Man, there’s a lot of broken things around here. :D

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...