Develop Reference

Download progress in HTML5

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.

How can I target jQuery mobile capable phones?

I've made a web-app using the jQuery Mobile framework for which I would like to provide a fall-back, for lower-spec phones.
My question is... what is the best way to target JQM-capablephones? I saw a similar question posted on the jquery forum. One of the answers suggested http://detectmobilebrowser.com/ which provides a long list of handsets.
Is this the best way, or should I be testing for browser-capabilities rather than actually targeting handsets. If it is the latter what feaures are considered to be 'Grade-A' featues?
Cheers

Progressive enhancement is what you should aim for, jQuery allows you to have a single codebase and have it work across the range of devices.
Consider this:
All links to other pages are regular html links, links will still work without AJAX support because they'd just send you to the location of the required page
All major framework elements are built around lists, links, and a few divs. No HTML5 required for rendering content
At the bare minimum, all phones can display a good amount of styling, allowing you to display the content no matter how capable
Do you have custom interfaces which wouldn't work at all without full support for jQuery mobile?

I agree that graceful degradation is the best solution. I would add that using the noscript tags is also a good way to provide graceful degradation by adding adding functionality via HTML for phones that have no support for JS.
I think it will be difficult to find a browser-capability (or even a set) that defines whether the phone will work with JQM. In my own experience I have used WURFL, an open source device detection library, that provides capability information. However I used it to target specific devices to include device specific CSS and remove all JS for other devices that I know do not support it (to remove the overhead of the JS being downloaded).
WURFL: http://wurfl.sourceforge.net/
JQM advertises that it provides graceful degradation:
Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.

I have also tested multiple JQM pages in a single mobile page which work great (very speedy) in JQM but suffer from the same problem mentioned (all pages show up when javascript is turned off in the browser of a smart phone). To work around this issue, only use a single page per JQM page (you give up speed and uniform page transitioning though). In regards to the NOSCRIPT tag option, that tag is NOT universally recognized in all browsers. To work around that issue, you could try something like the following:
<div id="no-js">
<!-- Place HTML without javascript here -->
</div>
<div id="js">
<script language="javascript">
// place javascript here which would be ignored by browsers not support javascript or with
// javascript turned off
document.getElementById("no-js").style.display = "none"; // be sure to hide the non javascript
// div
</script>
</div>
The above logic would work in either NOSCRIPT tag type browsers as well as those that do not recognize NOSCRIPT.
dlausch

Reliably detecting <img> tag support for SVG

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.

This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.

For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.

A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

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.