Thread: JS Progress Bar

Which of these progress meters are you using? I downloaded the first one and get an archive with a couple o’ files, including CSS.

Oh, OK, you mean this one, right? Apparently this script creates a canvas element. The example on that repository shows the progress meter being added to the body element. You can then add your CSS to position that element accordingly, like canvas {position: absolute; …}; the browser’s developer tools help you analyze the source code.

However, the progress meter is just a visual effect. In order to actually show the progress of a file upload you need to combine that with an AJAX script that actually returns the status of the file upload and then sets the progress meter’s status/progress accordingly.

Originally Posted by VIPStephan

However, the progress meter is just a visual effect. In order to actually show the progress of a file upload you need to combine that with an AJAX script that actually returns the status of the file upload and then sets the progress meter’s status/progress accordingly.

Which IE10/earlier cannot report the progress of an AJAX transaction, and IE9/earlier cannot upload files via AJAX, which is why generally you do NOT see attempts at using scripting to handle uploads in the first place... though this is a pretty good article on the topic of getting it working:
Uploading Files with AJAX - Treehouse Blog

From there you just have to hook onto the load progress which may or may not work.

Though done 'properly' you'd write the page to upload the file normally via a pageload, then enhance the page with scripting if possible with AJAX.

... which is WAY more complex than said canvas based (and therein only IE9/newer compatible) progress bar... one that could probably be replicated in less code and faster rendering without using canvas if you know what you are doing...

I haven’t “selected” canvas, the script is creating a canvas to display the progress. Look at line 41 of the code on https://github.com/neoziro/circular-...ar-progress.js. It creates a canvas and you insert it wherever you want eventually (the example on https://github.com/neoziro/circular-progress inserts it into the document body but you could insert is anywhere, really (e. g. have a div with ID “example” and do document.getElementById('example').appendChild(progress.el);)).

Use your browser’s web developer tools (or Firebug) to analyze the HTML source and see that there is a canvas element. Any HTML you see in the web developer panel you can style with CSS. That’s why I said you would style the canvas element.

Originally Posted by Blue1

Clever, isn't it?

Can't tell, doesn't work here... and being the typical train wreck of jQuery nonsense I'd be shocked if it works anywhere -- and that's BEFORE we talk about the accessibility disaster the site itself is.

Massive static CSS in the markup, static scripting in the markup, hordes of off the shelf scripts for christmas only knows what, no media targets on the stylesheet, oddball form structure, what looks like information that shouldn't be passed client-side being passed client-side, span doing label's job (laughably with class="label" on it?!?), scripting only elements in the markup, trapping onclick for no reason, using the various onevent attributes instead of attaching to the markup, polluting the global namespace, trying to pass values from locations (like those onevent attributes) where values shouldn't be trusted, broken layout at large fonts/120dpi since you're using px metric instead of elastic containers around dynamic fonts, accessibility woes from being a fixed layout...

Hence the ridiculous total file size and file count... in particular the 146k in external scripts on top of half the markup being scripting doing the job of one external file that I doubt given your current aim for functionality should exceed 16k... with the markup being reduced to around 2k from its current ridiculous 11k.

Though a LOT of what you have there is entirely inline with what I expect to be vomited up as a form when ASP is involved -- not your fault, it's a rubbish tool for server side programming as evidenced by the ridiculous repeating of values, massive number of bizzaroland hidden inputs, lack of anything resembling semantic markup or logical document order, yadda, yadda, yadda.

There is really little legitimate reason for what you have there to have much more than this:

Code:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Dima Dayoub</title>
</head><body>

<div id="top">

	<h1><a href="/">Dima <span>Dayoub</span></a></h1>
	<span class="date">15 March, 2016</span>

	<div class="galleryAndFiles">

		<hr>

		<div class="gallery" data-gallery-update="300ms">
			<img src="images/1.jpg" alt="photo_one" width="450" height="450">
			<img src="images/2.jpg" alt="photo_two" width="450" height="450">
			<img src="images/3.jpg" alt="photo_three" width="450" height="450">
			<img src="images/4.jpg" alt="photo_four" width="450" height="450">
			<img src="images/5.jpg" alt="photo_five" width="450" height="450">
			<img src="images/6.jpg" alt="photo_six" width="450" height="450">
			<img src="images/7.jpg" alt="photo_seven" width="450" height="450">
			<img src="images/8.jpg" alt="photo_eight" width="450" height="450">
			<img src="images/9.jpg" alt="photo_nine" width="450" height="450">
			<img src="images/10.jpg" alt="photo_ten" width="450" height="450">
		<!-- .gallery --></div>

		<hr>

		<form
			method="post"
			action="userpage.aspx"
			id="fileUpload"
			enctype="multipart/form-data"
			data-upload-type="progress"
		>
			<fieldset>
				<label for="fileUpload">Please upload your file(s)</label><br>
				<input type="file" name="fileUpload" id="fileUpload"><br>
			</fieldset>
			<div class="submitsAndHiddens">
				<input type="submit" value="upload">
				<a href="logout">Logout</a>
				<input type="hidden" name="hash" value="random hash here">
			<!-- .submistAndHiddens --></div>
		</form>

	<!-- .galleryAndFiles --></div>

	<hr>

	<div id="footer">
		&copy; 2015 Dima Dayoub, All Rights Reserved
	 <!-- #footer --></div>

<!-- #top --></div>

<script src="library.js"></script>

</body></html>

As the markup. EVERYTHING else being done there belongs either in the SINGLE scripting include or SINGLE stylesheet -- with the jQuery bloated rubbish kicked to the curb.

Originally Posted by Blue1

Can I ask why have you selected 'canvas'?

YOU selected canvas when you chose that progress script, which is why the title of that place you linked to is misleading as that progress script has jack-all to do with CSS3. What's being done COULD be done with 3's assistance, but that script chose to use canvas instead, so that's why you have to target a canvas element.

If I have time later I may take a few moments to do a rewrite of that page to show what I mean as a working demo of what you are intending/trying to do. You've actually got a pretty simple page as such things go, so it shouldn't take too long to toss together should another nasty bout of insomnia set in. I'm on a host of painkillers right now that's screwing up my non-24, so **** knows when I'm awake these days.

Originally Posted by deathshadow

I'm on a host of painkillers right now that's screwing up my non-24, so **** knows when I'm awake these days.

Plus, I heard Stephen Colbert rant about you having switched to daylight savings time already (and he must be sharing your pain).