Oct 25

hidden animated GIF images stop play in IE browser when submit form

I had met such a problem:

There is a form,a payment form to collect credit card info,below is the html code of the page.

Source code    
<form id="form1" action="PayPage.aspx" method="post">
    <input type="text" name="txtPost" value=""></td>
    <input type="text" name="txtEmail" value=""></td>
    <input type="submit" id="btnPay" onclick="return VerifyPage();" value="Submit" name="btnPay">
</form>

When click on the button to submit the form, we need to show a loading gif image to customer.  That means we are processing their request.Here is the js code below:

Source code    
function VerifyPage() {
    //do some validate
	//if all passed,show alert message box and the animated loading gif image
    sAlert("Connecting to bank......Please wait......<br/><img id='img123' alt='loading......' src='../resources/images/jindutiao.gif' />");
    return true;
}
 
function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
}

This works fine in all major browsers except IE.When the user click the submit button, the message dialog show,but the animated loading image is frozen.This is another know bug in IE browsers.IE didn’t play any hidden animated image after submit event.

To get around this bug,you need to let IE browser to reaload the image in a timeout. That means you need to change the image elements src attribute every moments.

Source code    
function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
 
    //added the following code to walk around IE BUG
    var imgurl = document.getElementById('img123').src;
    setTimeout(function() {
        document.getElementById('img123').src = imgurl;
    },200);
 
}
Jul 25

javascript – how to add/remove css class from a dom element

To change css style of a dom element,we usually operate directly on the style property of the element.for example:

document.getElementById('Id'').style.visibility = "visible";

what if we don’t want to operate in this way,we need to apply a list of css rule to the element.in this case,we just need to specify a new css class for the element.

document.getElementById('Id'').class = "newClass";

The code above will not work at all.

document.getElementById('Id').className = "newClass";

The code above will set the className to newClass.To only add or remove,the code will be a little more:

Source code    
document.getElementById("MyElement").className += " MyClass";
Source code    
document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/ , '' )

or we can just

Source code    
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');