A Twofer

Hey, my first post and I already spent an hour setting up wordpress so I’ll keep it short.  Recently, we did an overhaul of our video management web application at Episodic.  Like any sane web developer I did all my testing in Firefox and then found myself with one day left before pushing to production and I had yet to look at our site in IE7 (IE6 not supported).

So I RDC’d to our one Windows box and, uh oh, it don’t look so good and there are a bunch of JS errors.  Here were a few of the main problems that I had to solve for IE.

Trailing Commas

IE does not like trailing commas in things like object declarations.  For example, you will get a very general JS error that points to a line that has nothing to do with the problem if you have the following:

var myObject = {
foo: 'bar',
baz: anotherObject,
};

Positioning and Z-Index

Our site has a lot of fancy drop-down menus.  The menu is absolutely positioned within some relatively positioned element and then given a z-index so that it appears overtop of other elements on the page.  However, this was a problem on IE when I noticed that my menu would actually appear behind some elements on the page.  In particular, the menu would appear behind other elements that have “position:relative”.

This took a while for me to figure out.  Eventually it came down to this: If an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.

I did not come up with this on my own but it did take me a while to find this excellent page called “Z-Indexing with position relative and absolute“.

Mootools Events Targets

I LOVE Mootools.  Eventually I will do another post about some Mootools tricks I have picked up but for now I’ll stay within the context of this post.  I have a lot of JS code that looks like the following:

someElement.addEvent('click', function(event) {
if (event.target.get('tag') == 'li'
event.target.dispose();
});

However, the Mootools documentation says that the event target, is not extended with $ for performance reasons (which actually only seems to be true in IE and would result in JS errors).  Therefore, the above case should be written as:

someElement.addEvent('click', function(event) {
if ($(event.target).get('tag') == 'li'
$(event.target).dispose();
});

To avoid writing code like this everywhere I extended the Event class as follows:

Event.implement({
getTarget: function() {
if (!this.extendedTarget)
this.extendedTarget = $(this.target);
return this.extendedTarget;
});

This left me with:

someElement.addEvent('click', function(event) {
if (event.getTarget().get('tag') == 'li'
event.getTarget().dispose();
});