I wonder if anyone can help with something. I work on a website which contains a form. When the form is submitted, we display an overlay which contains an animated gif - a 'please wait' type thing.
When we first developed the code we had terrible problems with the animated gif in that it would hang on the first frame when the form was submitted. We found that decent browsers :) were all consistent in that we had to display the overlay, then wait a short period of time before submitting the form. We also found that IE required the opposite - we have to submit the form, then display the overlay. To add to this, we found that different versions of IE behaved differently in this respect (no surprise there!)
We eventually came up with the following:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class=""> <!--<![endif]-->
<head>
....
and
/* we need to do a minor hack here to ensure the animated gif continues to animate
* for IE we need to submit the form BEFORE we load the overlay
* for other browsers we need to submit the form shortly AFTER loading the overlay
* Not ideal, but we'll use the css class applied to the html element to test
* Perhaps in the future a more elegant solution might be to use something like Modernizr
*
* Note particular case for ie7, which requires a further step.
* By copying the html of the overlay and reapplying it, the browser is forced to re-render the page
*/
if (htmlElement.hasClass("ie6") || htmlElement.hasClass("ie8") || htmlElement.hasClass("ie9")) {
$("form")[0].submit();
$('#waitOverlay').overlay().load();
} else if (htmlElement.hasClass("ie7")) {
$("form")[0].submit();
var waitOverlayHtml = $("#waitOverlay").html();
$("#waitOverlay").html(waitOverlayHtml + "");
$('#waitOverlay').overlay().load();
} else {
$('#waitOverlay').overlay().load();
setTimeout(function() {
$("form")[0].submit();
}, 250);
}
This has been working well since being implemented. However, it relies on our use of conditional comments in the markup ... and good old IE10 has dropped support for conditional comments!
When IE10 runs this code, it falls into the else block as if it were a 'decent' browser. Whilst the site and page functionality still works - the overlay is displayed and the form is submitted - the animated gif does not animate! And our marketing department are very unhappy about this!! :(
I've not tested, but I suspect to get IE10 to work properly it will need to run the first if branch; the same code that IE6, 8 and 9 need to run.
I've looked briefly at trying to apply an ie10 class to the html element, but everything I've read (and the comment which we left in the original code 'Perhaps in the future a more elegant solution might be to use something like Modernizr') suggests this is not the way to do it.
So, assuming we used some feature detection library such as Modernizr, we would change our javascript as follows:
if ( browser has feature that makes IE6, IE8, IE9 and IE10 behave the way they do ) {
$("form")[0].submit();
$('#waitOverlay').overlay().load();
} else if ( browser has feature that makes IE7 behave the way it does ) {
$("form")[0].submit();
var waitOverlayHtml = $("#waitOverlay").html();
$("#waitOverlay").html(waitOverlayHtml + "");
$('#waitOverlay').overlay().load();
} else if ( browser has feature that makes standards compliant browsers behave the way they do ) {
$('#waitOverlay').overlay().load();
setTimeout(function() {
$("form")[0].submit();
}, 250);
}
So, my question is, does anyone know the features I should be looking to detect in the above code?
