BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan Right Header

HOME BZU Mail Box Online Games Radio and TV Cricket All Albums
Go Back   BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan > Welcome to all the Students > Tutorial > How to ?


Reply
 
Thread Tools Search this Thread Rating: Thread Rating: 3 votes, 3.33 average. Display Modes
  #1  
Old 08-09-2011, 02:25 AM
.BZU.'s Avatar


 
Join Date: Sep 2007
Location: near Govt College of Science Multan Pakistan
Posts: 9,693
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
Reply

Tags
animated, bar, form, javascript, progress or loading, submit


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Slides of introduction t0 Javascript hurain07 Web Engineering 0 18-06-2011 01:23 AM
Yahoo i submit my 1st 100 posts Salman Mushtaq Chit Chat 14 21-09-2010 12:04 PM
Submit your website to over 100 search engines! AbdulQuyum User links/Others sites links 0 30-08-2009 09:16 PM
Introduction to JavaScript PPT slides (BSIT06-10) .BZU. E Commerce 1 05-12-2008 09:32 PM

Best view in Firefox
Almuslimeen.info | BZU Multan | Dedicated server hosting
Note: All trademarks and copyrights held by respective owners. We will take action against any copyright violation if it is proved to us.

All times are GMT +5. The time now is 04:53 PM.
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.