Got Status? Hi all,
For anyone interested in adding a simple "status" indicator to the
Item Post or
Item Edit pages, I'll show you a way to do so. This is not a "progress" indicator in the sense that it lets you know how far along the upload is. Rather, it simply gives a visual indication to the user that something is happening. You can use any animated GIF image you'd like with this... I'll show you where to get some.
Step 1: Edit your
item-post.php or
item-edit.php page (or both). Within the <head> section, at this code:
<script type="text/javascript">
function loadSubmit() {
var selected = $("#catId").val();
if(selected>0){
var ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.visibility = "visible";
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
}
}
</script>
Step 2: Find this code near the bottom of the document:
<button type="submit">
Replace it with this code:
<button type="submit" onclick="return loadSubmit()" >
Step 3: Finally, place this code where you wish for the indicators to be seen (I suggest placing it immediately below the <button> code shown in
Step 2):
<p style="visibility:hidden;" id="progress"/><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="statusbar.gif" alt=""> Uploading in progress...</p>
You'll want to
replace the image src
statusbar.gif with the correct file path and name for your own image. The text, "
Uploading in progress", can also be customized as you'd like.
Where to get your own animated GIF indicators:Below, I've attached some images. The first one is of the "Publish" button before clicking it. The second image shows the status bar being displayed after clicking the "Publish" button.
Code source: http://www.ryantetek.com/2009/06/animated-progress-loading-bar-upon-form-submit-javascript/