Friday, June 15, 2012

Small detail that prevents JQuery UI dialog working with custom button CSS classes in IE7 and IE8. Should we start taxing people using IE7?

As much as I like Microsoft technologies there are few products made by Microsoft that I deliberately try to stay away from. Most of all these are Microsoft browsers, especially those that are IE9 and older (IE8 and IE7 specifically). Not only IE7-IE8 and in many cases even the latest IE9 are significantly slower than Chrome and FireFox, but also it's a living hell for developers, trying to make standards-compliant web-site. 

I was not at all surprised to read about a company that charges its customers using IE7 a special fee (tax) to make up for the expenses towards making the web-site IE7 compatible. It's understandable that most of the users are in fact late adopters of any new technology on the market, but not when we're speaking about free software that takes a mere minutes to update and that will in fact run much better and faster. So I suppose this is the right move and users need to be pushed once in a while for the sake  of technical progress. 

In the meantime I still have to fully support IE7 for most of my customers. Last week I had yet another hour or so totally wasted trying to decipher another IE7-specific problem, this time with JQuery UI library. I needed to create a simple confirmation dialog box with two buttons ('go ahead' and 'cancel') each of the buttons having its own CSS class. Very simple thing for my fav browser Chrome as well as for IE9, but not for IE8 and IE7. Not a single word in developer tools console or anywhere else, just does not work at all. 

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".removelink").click(function() {
$( "#dialog-confirm" ).dialog({ resizable: false, height:200, width:730, modal: true, buttons: {
"Cancel": { 'class': 'class1', click:function() {
$( this ).dialog( "close" );
}}, "Delete all items": { 'class':'class2', click:function() {
$( this ).dialog( "close" );
self.location = '...'; }} }
}); return false;

The small detail that makes a big difference in a world of IE7-IE8 is this: 'class': 'class1', click:function(). It's really important to put quotation marks for the 'class' attribute. Otherwise it just does not work. Hopefully soon this won't be necessary at all, but as there's still some 3-5% of visitors with IE7, customers are reluctant to declare it's not supported. They are clients after all. 

30 November 2013
Bigcommerce template editing
How to change content in templates: guide for a complete newbie.
Read full story
09 October 2013
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
14 October 2012
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story

Blog archive

The author of this web-site supports WWF . Please do your part in saving our planet!

Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College