|
Problem: when you use animated images in blockUI messages and bind it to the submit event, IE does show them not animated but static.
Solution:
1. First, make sure that animation is enabled in IE: Toos->Internat opetions->Advanced->Multimedia->Play animation in webpages.
2. Assign the id for the animated image. Example:
<div id="waitMessage" style="display:none;">
<p><br /><img id="progress_image" style="vertical-align: middle" src="/<%=Html.Encode(siteroot) %>Images/busy.gif" /><span style="vertical-align: middle"> Just a moment...</span></p><br />
</div>
3. In the blockUI function reset the image source for the animated gif after submit actually starts. Example:
<script type="text/javascript">
var hideUIWhenPost = true;
function hideUI() {
if (hideUIWhenPost) {
$.blockUI({ fadeIn: 0,
fadeOut: 0,
message: $('#waitMessage'),
css: { cursor: 'default',
border: '1px',
borderColor: '#C8C8C8' },
overlayCSS: { cursor: 'default'} });
ProgressImage = document.getElementById('progress_image');
setTimeout("ProgressImage.src = ProgressImage.src",100);
}
};
$(function() {
$("form").bind("submit", null, hideUI);
});
</script>
|
