HomeОбразованиеRelated VideosMore From: Adam Khoury

HTML 5 Tutorial Progress Bar For Progressive Javascript Events Processing or File Upload

327 ratings | 72219 views
Lesson Code: http://www.developphp.com/video/HTML/Progress-Bar-Progressive-Javascript-Events-Processing Learn how to tie the HTML5 progress element to progressive Javascript events, whatever that progressive event may be. Come learn HTML and HTML5 with us: http://www.developphp.com
Html code for embedding videos on your blog
Text Comments (50)
DMoots (6 months ago)
Adam, I gotta say, I love your accent! It sounds programming is your hobby when you're not working for the mob. "Eh fat Tony could you keep the noise down? iI'm trynna code 'ere!"
eisa fun time E.F.T (10 months ago)
what if i want a button to be click then it Progress
Conocimiento_Scout (1 year ago)
ok thanks for the tutorial, but this bar is based on time, what happens if the bar goes to 100% and it is not loades yet?
Hootch Gaming (1 year ago)
how to tie a progress bar to a website
behshad yaghoubi (3 years ago)
adam you are so pro but you choose hardest way to teach
abby Sand (3 years ago)
This is a great line 'Any small child with a keyboard knows how to tie a progress bar to their page' Great line
Mihai Rares (3 years ago)
you sound like Jimmy fron black mass lol
Jack Johnson (3 years ago)
Is there a way I can redirect to a url after the progress bar reaches 100? help please..
Gary Richter (9 months ago)
Jack Johnson from his example replace the code in the if(al == 100) with if(al == 100){window.location=‘http://myURL.com’;}
Jack Johnson (3 years ago)
Where I'm to implement this codes?
Adam Khoury (3 years ago)
+Jack jack https://www.developphp.com/lib/JavaScript/location
i tried those codes you've used but unfortunately i doesn't stop, and i think when i reach to 100% it will automatically stop. i tried this in notepad. could you help me to make a progress bar which automatically closes the page . after it reaches in 5%? once you run it. after 5 mins it will automatically close the page please help me.
Kopparthi Bharadwaj (3 years ago)
I am disappointed by this videos, as it cannot be used for any real time application, all that you did was run a progress bar for a preset time interval, but in real situation we don't know what time it take to complete the process and this approach utterly fails.All those who are saying this a great video, i don't see their point :(
Kopparthi Bharadwaj (3 years ago)
+Christopher Sprance Yeah that's true! friend :) .
Christopher Sprance (3 years ago)
+Kopparthi Bharadwaj Once you understand the basics of how to implement it, you can very easily tie any event to the progress bar. The video is there to give you an idea not tell you everything.
puputneha (3 years ago)
Great video Adam. I have a different type of progress bar that I want to do - I want the progress bar to update itself automatically once a date (dd/mm/yy) has passed. Can you please help me on this? Thank you. :)
michael egbuchu (4 years ago)
love the video and i also leant som tin new
Braydon Gines (5 years ago)
Ok I understand but I want it to idle for a moment doing the basic unknown completion time.
Ryan Kelbley (5 years ago)
Just stumbled upon this vid, and noticed a peculiar similarity to an article on the codeproject site entitled "HTML 5 Progress Bar for Progressive Javascript Events Processing," by Emad Al Hawary. Unless that is an alias of yours (which I doubt), it would appear that the article's author stole your code, given that it was published in Dec. 2012 while your video was published in Jan. 2012. Not that it matters much... It's just the principle of the thing lol.
idle qualms (5 years ago)
Love your vids. Do you happen know how to create a seekbar for audio element?
Santi locomia (5 years ago)
Any ideas anyone of how to tie that to a image upload form? My form already has an event onChange to validate file extension. I would like to show that progress bar to show the percentage of the image been uploaded. Any one??
Ramzy Elias (5 years ago)
we want learn us website from A to Z .
edrine novales (5 years ago)
Nice work dude.. I learn a lot from your video :D upload more.
youpattube1 (6 years ago)
i was a little disappointed. you start off by saying that any kid with a keyboard can add a progress bar to a document, the trick is linking it to an event, like a download event. then all you showed was how to put a bar on the page, and nothing about linking it to an event. maybe you lost your train of thought.
Tapas Chand (6 years ago)
i like ur tutorial but one thing make me so disappointment that is when you just paste the code like u did with javascript, if u can do it practical way one by one coding, I can get better understand..
Ja J (6 years ago)
Hi Adam do you have a video that shows a progress bar that is tied in with a php upload form and script?
Enosh Zerahia (6 years ago)
how to do that when im refresh the page, the prosses will be the same befor refresh?
Bryan Olan (6 years ago)
how can i make this work on fat browsers? you know... :) it works in chrome,mozilla,safari and opera
ako dimple (6 years ago)
cant you teach me how to put link in it? instead of process complete can i put link in it?
JordanDovahkiin (6 years ago)
Cool vid man.
Qfly9 (6 years ago)
"A big giant beefy bar." LOL!
TheAnonymousLeague52 (6 years ago)
Rabbit hole haha ha
Syed Hydari (7 years ago)
Thanks for share I like that its very appreciated :)
AllenTsuna (7 years ago)
Omg, thanks man I never knew that if you add the javascript coding to the body tag instead of the head tag, it skips the window.onload()
Oliver Randorff (7 years ago)
@flashbuilding You are AWESOME
Can you please teach us how to tie it too a file upload?
ajsimpson89 (7 years ago)
You should refrain from, let alone teach passing string literals to setTimeout.
Philip Kane (7 years ago)
Very clearly explain and straightforward ! I love it!
Yans TM (7 years ago)
nice.. i am realy like it..thank you.
T X R (7 years ago)
youtube should pay you for such great tutorials ! :)
Martin M (7 years ago)
You can also add progressbar max value inside javascript function. document.getElementById("progressBar").max = 100;
mfelipevc (7 years ago)
@NextEdits Ya !! It would be awsome !!!
Touched by a 12gauge (7 years ago)
ADAM !!! Benn watching you since 08 I thibk. YOU got me through AS3 class in college. YOUR THE BEST BRO !!! TY :D
mikeytingstrom (7 years ago)
Thank you for the tutorial :)
Hemmersfield1 (7 years ago)
i love this guy!
Nico Cvitak (7 years ago)
Can you please make a tutorial on how to implement it with a file upload :D
Abdulrahman Aloraini (7 years ago)
Thanks Adam
Adam Khoury (7 years ago)
@abanda3d - thanks buddy... I have a good HTML(5) text based course going at the site if you want more in depth info.
Stone cold (7 years ago)
nice vids we gonna be masters of h5 when it comes out if u keep puttin vids XD
Asm-Computing (7 years ago)
Nicely done dude be cool when they do actually release HTML 5 throuhout all the browsers lol 2014 still to long away lol

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.