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) { [COLOR="Blue"] $(this).delay(650 * index).fadeIn(800,function(){ if (index === 0){ $(".eheader").html(index+1+header); } else{ $(".eheader").html(index+1+headers); } }); [/COLOR] }); }); } </script> </body> </html>
Comment