Cross Browser Compatibility

If you are moving your application to support all available browsers or you are creating your application ensuring cross brpwser compatibility, You might be replacing java script with jquery and replacing some css property. Apart from these things you might face lot of issues which is not listed anywhere or in other words you have to search more and more.
I am going to explain here such scenario which are very rarely available on net and these issues will arise once you migrate your application. There is always alternative for almost all issues but these hot-fixes are not going to work every time, they will fail at some point for sure.

Consider below two cases:

1. You have disabled hyper link using java script/jquery
2. Dynamically using javascript/jquery you are changing some property of DOM object/Controls

Case 1 :

If you will disable any hyper link using javascript or jaquery using below code then it will work only for Internet Explorer and will not work at all in other available browsers.

  <a href="http://www.blogger.com/somehyperlinkurl" id="test">Test Link</a>
<script>
function DisableLink()
{
  document.getELementById("test").disabled = true;
  // or you can try 
document.getELementById("test").disabled="disabled";
//or using jquery
$("#test").prop("disabled","disabled");
}
</script>

Now in order to resolve this issue and made work for all browsers, you might be changing the href property of the anchor tag, but that is not a good way. We have some properties in css which will help you out. Try the following :

<a href="somurl" style="pointer-events:none">Link Text</a>

Refer W3C website for more details on pointer-events. This is not going to work for Internet explorer, you have to use disabled property to disable hyperlink in Internet Explorer.

Case 2 :

Whenever you are changing any property of the control dynamically using JavaScript then you IE browser will hang in most of the time because of the onpropertychange event which is Microsoft proprietary and worked only for IE and whenever any property is changing then this event fires automatically which leads browser to hang.More detail about his event is given at Microsft website.

In order to overcome this issue you have to unbind this event for IE using below jquery code:

<script>
if($.browser.msie)
 $("#controlid").unbind('onpropertychange');
</script>

or you can loop back for all the form controls and unbind the above event. Hope this tip will help you lot in your coding. Let me know or share if you are facing some other issue while making cross browser solutions. It will help other people also.