If you want to display a animated image that overlays on user screen after they submit a form you can do the following:
- In visual editor swicth to HTML mode then right above the save & reset buttons section insert a DIV element.
- Insert a PHP Snippet inside the newly added DIV in your add or edit form (this example was only tested on the popup style of those forms only, though theoretically it should work on nonp-pups as well since they reload page after submitting... which stops the image form displaying).
- In the snippet add this code:
echo "
<style>
.loader {
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px; /* half width of the loader gif */
margin-top: -50px; /* half height of the loader gif */
text-align:center;
z-index:9999;
overflow: auto;
width: 200px; /* width of the loader gif */
height: 102px; /*hight of the loader gif +2px to fix IE8 issue */
background-color: greenYellow;
}
.loader_text {
color: #0B34FA;
font-size: medium;
font-weight: bold;
}
</style>
";
echo "
<div id=\"loader\" class=\"loader\" style=\"display:none;\">
<p class=\"loader_text\">PROCESSING ORDER...
<img id=\"img-loader\" src=\"loader.gif\" alt=\"Loading\"/>
</p>
</div>";
4. In the edit or add form where this is being implemented add the following code to your JS Onload event:
//Confirm with user, disable save button to prevent multiple submissions, and display progress bar/graphic
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
if (confirm('We are about to process your credit card.\r\nPlease be patient and only click on the \"process card\" button once.')) {
$('*[id*=saveButton]').attr('disabled','disabled');
$('#loader').show();
return true;
} else {
return false;
};
});
5. That's it. You are done. Don't forget to include a GIF in your web folder so so have something to display!
Lastly, as always I need to give credit where it's due. I got this idea from the following site: http://www.designdim.com/2010/11/create-jquery-loading-animation-to-make-your-website-attractive/
I also took the advice of that website and visited this site to get my customized animated progress bar: http://ajaxload.info/
Cheers,