Tweet
I have a small jquery function that loops through a list of form validation errors, and fades in each error, in succession using and .each loop.
Currently in the header of the container for the errors I added a count of total errors. As I have written my code this header is updated AFTER each error message fadesin, as I have assigned it in a callback function on the fadein.
I am trying to figure out how to display the count as the error message starts to fade in, not when it finishes. a little help please?
Currently in the header of the container for the errors I added a count of total errors. As I have written my code this header is updated AFTER each error message fadesin, as I have assigned it in a callback function on the fadein.
I am trying to figure out how to display the count as the error message starts to fade in, not when it finishes. a little help please?
Code:
<html>
<head>
<style type="text/css">
#errorcontainer {
margin-top: 3px;
display: none;
}
.eheader {
padding: 5px;
background: #FFE1E1;
font-weight: bold;
line-height: 1em;
}
#errors div {
display: none;
margin-top: 5px;
margin-bottom: 5px;
padding: 3px 5px;
background: #EAEAEA;
color: #9F0000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="show errors" onclick="show_errors();">
<div id="errorcontainer">
<div class="eheader">!</div>
<div id="errors">
<div>sduifhsdjiofsdkop</div>
<div>fjsdklpfj</div>
</div>
</div>
<script>
function show_errors() {
$(".eheader").html(" 1 Error Occured!")
var header = " Error Occured!"
var headers = " Errors Occured!"
scroll(0, 0);
$("#errorcontainer").delay(200).fadeIn(800, function () {
$("#errors div").each(function (index) {
$(this).delay(650 * index).fadeIn(800,function(){
if (index === 0){
$(".eheader").html(index+1+header);
}
else{
$(".eheader").html(index+1+headers);
}
});
});
});
}
</script>
</body>
</html>
Comment