View Single Post
  #1  
Old 08-09-2011, 02:25 AM
.BZU.'s Avatar
.BZU. .BZU. is offline


 
Join Date: Sep 2007
Location: near Govt College of Science Multan Pakistan
Posts: 9,692
Contact Number: Removed
Program / Discipline: BSIT
Class Roll Number: 07-15
.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute
Lightbulb Animated progress/loading bar upon form submit - Javascript

Animated progress/loading bar upon form submit - Javascript

This piece of code displays an animated in progress bar after clicking the form submit.This is a good idea when your form is requiring large time when submitting information like file uploads.This will give the users the idea that the form action does not stuck up and is currently in progress.It does not require ajax,just javascript and some css and you can produce this animation.

First, you can download some cool,customizable and free loading icons at http://www.ajaxload.info. Then for the code:
Initially we will set the text and the image visibility to hidden.
You can put this code maybe beside your submit button so after clicking it the user can easily see the animation.

HTML Code:
 <span style=”visibility:hidden;” id=”progress”/><img  id=”progress_image” style=”padding-left:5px;padding-top:5px;”  src=”http://www.adminspoint.com/images/ajax-loader.gif” alt=”">  Uploading in progress…<span> 

This is the javascript function that triggers and displays the image and the text.

HTML Code:
<script type="text/javascript">
function loadSubmit() {
var ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
    </script>
}

The setTimeout function is for IE 6 and 7 users.This is because IE will stop any animated gifs from animating when the form is submitted.So we will display the image first(the animated one) then return the function to true.When the function returns to true, that is the time the form will submit,thus the users will see the loading icon first before the form submits.
Then trigger the function upon clicking your submit button.



HTML Code:
 <input id=”contSubmit” onclick=”return loadSubmit()”  src=”http://www.adminspoint.com/images/submitinfo_btn.jpg” type=”image”  /> 
Basically,that’s it.Just change the path of the images to where your images resides.Feel free to email me if you have any questions/suggestions.Thanks!
__________________
(Ż`v´Ż)
`*.¸.*`

¸.*´¸.*´¨) ¸.*´¨)
(¸.*´ (¸.
Bzu Forum

Don't cry because it's over, smile because it happened
Reply With Quote