Download progress in HTML5 - javascript

If I have 5 javascript files and each of different size and same with CSS, is it possible to show "real time" progress bar when scripts/css get downloaded?
I know this can't be possible in HTML4 and would require Flash/Silverlight. But can I achieve this in HTML5? If yes, how would I do it?
I want to show a text like "Downloading" and as each script/css get downloaded real time, each letter of Downloading should start filling up. I am not asking for any code. Just want a high level concept of how that is possible.
Thanks.

Here's what I've been able to come up with; In HTML5 there is a <progress> element that you may be able to use. The bad news is that support for this element isn't as good as it could be. See the support chart here: http://caniuse.com/#search=progress There's no support in Safari 5 and below or IE9 and below. Partial support is in IE10 and any relevant versions of FireFox. If you need more support try a polyfil like this one: http://lea.verou.me/polyfills/progress/
If you choose to use the <progress> element here's a link about how to style it: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
Now the trick about making this work, you'll need to know the file size of the file(s) you'll be downloading and the number of bytes downloaded. As the files are being downloaded you'll have to get the header info that tells you how many bytes are transferred. You can see a sample of how to do that with jQuery here: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results
Note that this method will not work with IE. IE does not expose the header data of the XHR object.
At this point set the max attribute of the <progress> element to the total file size and using the setTimeout sample, update the value attribute of the <progress> element.
Knowing all this, maybe finding some kind of package solution with a built-in Flash fallback might be much easier to implement, and have better support. Anyone else have any ideas?
Good luck.

Related

Including SVG in HTML5 for iOS

I'd like to include an SVG image in an HTML5 web page, to interact with this SVG via JavaScript, and to apply CSS styling. If possible, I'd prefer to keep the SVG in a separate file. I'm hoping to be able to use the web page offline so hopefully whatever solution is recommended will be compatible with this.
Please could someone suggest the best / most cross-browser compatible way of doing this? If there's not really a method that will work across all browsers, I'd be happy to settle for a way that works with iOS 4.3's Safari browser :-)
Thanks in advance!
Thanks to everyone and apologies for not giving an update sooner - Unfortunately, I got distracted by another project!
After some time playing with various alternative options, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ) I've still not been able to use an external .svg file and keep the JS in the main HTML5 file - i.e. I've been unable to get these approaches to allow the SVG file to reference JS functions, or to allow the HTML file to gain access to elements from the included SVG file. Even inline SVG doesn't yet work on iOS :(
So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I'll need to create the SVG programatically rather than being able to just link to an external .svg file. I'll just have to write a script to translate the SVG content to JS Raphael function calls and hope to avoid any other other stumbling blocks.
It depends the browsers you are targeting. Modern browsers (IE9, Chrome, Firefox4...) support inline SVG. Older browsers may require some alternatives.
Here there is an online test to check browser support by using several methods to include the SVG.
http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html
But I think that if you are using HTML5, then you are targeting modern browsers so you should use inline svg with the <svg> tag.
Take a look at this page: http://www.schepers.cc/svg/blendups/embedding.html
It shows five different ways of embedding an external SVG file into HTML (note that these aren't the only ways, but they are the simplest). It's also a quick way to check the capabilities of a particular browser.

How to create a drop zone for images to be dragged into?

Is it possible for javascript or html to create a drop zone for images to be dragged into by a user? I suppose it is an image placeholder that will accept images dragged into it while the page is live?
Images from where? If you want to be able to drag images from the webpage itself, that is possible, but if you want images from outside to be dropped, that is simply not possible using JavaScript. difficult at the moment.
Edit: As #John Boker mentioned, it is possible, but at the moment, the APIs are highly non-standard and vary wildly between browsers. HTML 5 will support a standard and simpler API for this but HTML 5 itself is not a standard yet.
Some resources:
HTML5 Drag and Drop File API - currently works only in Firefox, will hopefully become standard soon
VBDataObject Interface - works only in IE
Recently http://www.dropzonejs.com/ has become quite popular.
Short Answer: Yes you can, but your browser needs to support for the Drag and Drop and File APIs that are part of HTML5. Currently, that is only Chrome 8+ and Firefox 3.6+.
July, 2011 Update: Current browsers that support this are Chrome, Firefox, Safari 6 (and Safari 5 if you use FormData objects) and IE 10 Preview 2. More information here.
IE 8 and 9 don't work, not sure if IE9 final will change this.
Safari 5 (as much as Apple touts HTML5) has no support for the File API necessary and DnD of native resources is not recognized (DnD within the page can be made to work, but that is only half the problem). You can hack around this lack in Safari 5 by using a trick of styling out an INPUT field of type "FILE" to actually not show the file path bar and utilize the fact that that Drag and Drop onto a file upload box in Safari actually inserts the full file name -- you use some JavaScript to trigger the upload as soon as they drop and viola. Here is a tutorial specifically for that hack.
Opera doesn't seem to support either API -- I've read that they are waiting out the battle of the HTML5 spec until the dust settles THEN adding support for those APIs necessary to do this.
I am actually the author of the HTML5 Drag and Drop/File API Upload tutorial linked above and used that method to implement exactly what you want at imgscalr.com -- the JavaScript is heavily commented if you want to pull it down and look at how I'm doing it.
Hope that helps.

How can I preview the file in a file input using JavaScript?

I want to be able to preview an image for a user before they upload it.
I've of course discovered that all the modern browsers obscure the actual full path in one way or another, so my original plan of just setting an <img /> element with the local path is out of the question.
I've found this solution, which isn't bad, but I'm expecting the images to be a little bit large, and my users' internet connections to perhaps be a little slow, so this isn't exactly ideal.
I've found that FireFox has the getAsDataURL() method, which would work perfectly if there was some form of it in the other browsers, or at least even IE, but I haven't been able to find it.
Is there any other way to do this and have it work in IE7/8 (6 is a bonus but I don't care that much), FF2/3, and webkit without resorting to a plugin?
The answers to the question you have linked tell the truth: There is no way to read files from the user's file system using JavaScript. You will need to upload the image before you can append it to your page as an <img>.

Drop Files From Window To Javascript

I am sure it's possible to be able to drag files onto a Flash movie inside a browser, but is it possible to achieve the same functionality with Javascript?
I have seen a site (can't remember) that did this, but I never checked if it was a pure Javascript solution compared to a Flash solution.
I am leaning towards the not side, I believe that breaks the limitations of Javascript, although if there is any solution I would love to hear it. My only worry is it won't be supported that well across different browsers.
I don't think it's possible to drag a file into a page as such.
Though some browsers may allow you to drag a file into a file upload input box. If this is the cease, perhaps you could stretch such an input via CSS and make it transparent/overlay on background to provide a "pretty" drop target.
You can do this with ActiveX, though it would only work in IE.. and here is an article describing how to do a drag/drop upload in Firefox http://straxus.javadevelopersjournal.com/creating_a_mozillafirefox_drag_and_drop_file_upload_script_p.htm
There isn't a generic way of doing this that will work for all browsers with javascript - but you could use a java applet like this: http://www.zackgrossbart.com/hackito/2007/11/28/drag-and-drop-file-uploading-made-easy/
The article which shows how to support drag and drop with an applet is at:
http://www.zackgrossbart.com/hackito/dnd-file-uploading
There's another article which shows how to do this with just JavaScript. This requires HTML5, but it works well.
http://www.thecssnin]ja.com/javascript/drag-and-drop-upload

How do I embed a flash SWF file and get around the IE security layer without using swfobject (to keep down file size)

I'm looking for a way to embed an SWF into a page and get around the Internet Explorer security issue (where it requires an extra click to "activate" the flash file).
I've got my code working with swfobject, but I'm using this in an embedded widget context (eg a clickable banner ad) so I am really trying to keep my file size down, and swfobject adds about 10k worth of minified Javascript that just feels like more than I need
I just need basic flash rendering, I'm not really that worried about Flash version detection (I'm using an old enough version of Flash for the SWF) though a fallback solution if flash is not available would be nice.
Finally, this has to be something that can work entirely from a single Javascript file included somewhere in the BODY tag of the containing page. (The reason I say this is because I had some issues even with the swfobject version when I was document.write'ing a SCRIPT tag for the swfobject.js into the BODY of the page instead of the HEAD).
I hope that makes sense, I can clarify if needed.
Thanks in advance!!
"Click to activate" is no longer an issue, see this note.

Categories

Resources