Bring attention to an element by flashing it’s background

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

Recently I needed to grab the users attention if they attempted to submit a form that had errors, now when the button is first clicked a box is shown with the error they must fix. But if they clicked the button again (in frustration because perhaps they had not noticed the error box appearing) I wanted to flash the error box to attempt to grab there attention away from the button to the problem.

My finished solution is below, it’s a function you can call however you wish and to any element using it’s Element Type, ID, Class, or Name attribute (Using the JQuery selector).

Function

Here is the function:

/* Flash Element to gain the users attention
 * By Dean Williams - http://dean.resplace.net
 */

function flashElement(el, times, speed, defColor, color) {

	if (speed == undefined) {
		var speed = 200;
	}

	if (defColor == undefined) {
		var defColor = $(el).css("backgroundColor");
	}

	if (color == undefined) {
		var color = "#FFFF9C";
	}

	//Stop any previous animations.
	$(el).stop();

	flashElement_process(el, times, color, defColor, speed);
}

function flashElement_process(el, times, color, defColor, speed) {
	if (times > 0) {
		$(el).animate({ backgroundColor: color}, speed, function() {
			$(el).animate({ backgroundColor: defColor}, speed, function() {
				//one flash done
				flashElement_process(el, times-1, color, defColor, speed);

			});
		});
	}
}

How it works

On a button press for example you would call the function flashElement with the following parameters:

flashElement(selector, flashTimes, flashSpeed, defaultColor, flashColor);

Selector – The element you wish to flash, for example “.classname” to select by class, “#id” to select by id and “element” to select by element.

flashTimes – How many times you wish the selected element to flash.

flashSpeed – How fast would you like the flashing to happen (default 200).

defaulyColor – The default element color (default is element BG color when invoked).

flashColor – The flash color (default is yellow).

Note: The function flashElement_process should never get called directly and exists only for recursion.

Example

I have uploaded a YouTube video which shows a basic example, I have also included the code used for the example so you can try it out yourself.

Example of the function.

 

Here’s the code, script.js is the JavaScript function code shown above (no point pasting it twice Winking smile)

<html>
	<head>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<div class="errors" style="border:1px solid black; margin:10px; padding:10px; width:200px;">
			Please correct these errors in the form before you can submit.<br><br>
			&gt; Form Missing!
		</div>
		<input style="margin:10px;" type="button" onclick="flashElement('.errors', 5, 100, '#FFFFFF');" value="Submit">
	</body>
</html>

 

Hope you found this useful, if you use this please make sure to keep the credit attached on your code. And as always please leave comments, suggestions or feedback in the comments!

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

  • Andrew

    I see one type and there exists at least one more in your pasted script above. As it is, the code does not work. It is a cool idea and I appreciate you posting the technique.

    flasElement_process(el, ...
    should be
    flashElement_process(el, ...

  • yup your right, this is obviously a typo.... I will rectify this now. 😳