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.
Here’s the code, script.js is the JavaScript function code shown above (no point pasting it twice 
)
<html>
<head>
<script 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>
> 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!
Twitter
Facebook
Linkedin
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. :oops: