Sep 30
The problem
I was recently working through some Internet Explorer issues with a web application I've been involved in developing, when I came across a strange little bug related to the "change" event. I found that I had to click a radio button twice, or click a radio button and then click elsewhere on the page in order for the event to be triggered. This obviously pointed towards the event triggering to be buggy in Internet Explorer.
The explanationFrom
QuirksMode:
IE fires the event when the checkbox or radio is blurred, and not when it is activated. This is a serious bug that requires the user to take another action and prevents a consistent cross-browser interface based on the change event on checkboxes and radios.
The solution?I see there being 3 possible solutions:
- Use the "click" event rather than the "change" event.
- Use browser specific targeted script in the JavaScript functions where the "change" event is required.
- Use conditional comments to include IE specific JavaScript, and trigger blurring and then focusing the field.
The best solution right now seems to be to use the "click" event rather than "change" in these scenarios. This is certainly not an elegant solution and does indeed "break" the keyboard functionality since it is possible to change the value of an input field with the keyboard and hence not trigger a "change" event. I'd say the 3rd solution comes a close runner up, and the 2nd solution definitely being suboptimal, for the reason that it is difficult to consistently detect the browser using JavaScript.
I found it interesting, so I thought I'd share and maybe it will help someone! I'd
love to hear your opinions on what you think the optimal solution is.
If you find my posts useful, you should
check out my OnePage and
follow me on Twitter.
Jul 15
I hope to make this blog useful both from an entrepreneurial standpoint and a web development standpoint. Here is a more technical entry.
Problem
I just had to solve an issue I was having with input elements dynamically inserted via JavaScript and it took me an hour or so to find the solution, so I thought I'd post it here for the opportunity it may help someone else reach the solution faster.
The problem arose when I discovered that a tool I had developed which uses AJAX extensively to change the options available to the user depending on other options was not working in Internet Explorer (testing was on IE7).
It was not immediately obvious that it was IE's broken implementation of the DOM which was causing the issue. The first thing I discovered was that the serialize() function was not including elements. I then discovered that this was only when the elements had been inserted dynamically via JavaScript. I then happened to find a
post by Aaron Gustafson on Easy! Reader entitled "Death to bad DOM implementations", which outlined the very issue.
The problem is that IE disallows changing of the name attribute of elements after the element has been created. Thus the usual method I use won't work:
$(document.createElement('input')).attr("name", "email"));
The reason is that the input element is created and then the name attribute is added once the element already exists. IE doesn't like this.
Solution
In the
comments of Aaron's post, Chris Purcell has a very nice function to use which solves the problem:
document.createNamedElement = function(type, name) {
var element;
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) { }
if (!element || !element.name) { // Not in IE, then
element = document.createElement(type)
element.name = name;
}
return element;
}
So you can then simply do (for form elements):
$(document.createNamedElement('input', 'email));
If that helps even just one person out there I'll be very happy. Also, documenting it reinforces it in my memory for the future.
Jun 5
I just had an issue with Flash appearing above a Facebox window in one of the projects I've been working on. Thought it may be useful to post the solution I found, since it wasn't an instant find for me.
The solution
When you embed flash on a page, you'll almost always have an <object> element and an <embed> element.
What you need to do is add <param name="wmode" value="transparent"></param> as a child element to the <object> element, and add wmode="transparent" as an attribute to the <embed> element.
That's it, fixed it nicely for me :) Happy coding!
