Wednesday, December 10, 2008

IE7 Tricks

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();
});

1 comment:


  1. - Lạc Mộc, ngươi cũng tới sao, không nghĩ tới ngươi cũng có hứng thú với Cực Viêm Chi Địa.

    Phía trước kết giới Thần Hoàng Tộc, mấy đạo hơi thở xen lẫn thanh âm nói chuyện.

    Chuyện Cực Viêm Chi Địa lớn như vậy ta tự nhiên là muốn tới rồi, thế nào, Nam Tương Tử cũng có hứng thú sao.

    Một đạo thanh âm sang sảng trả lời.

    - Năm trăm năm trước, Nhạc gia Nhạc Thiên tiến vào Cực Viêm Chi Địa, sau đó thực lực tădongtam
    mu moi ra hom nay
    tim phong tro
    http://nhatroso.com/
    nhac san cuc manh
    tổng đài tư vấn luật
    http://dichvu.tuvanphapluattructuyen.com/
    văn phòng luật hà nội
    tổng đài tư vấn luật
    thành lập công ty trọn gói
    http://we-cooking.com/
    chém gió
    trung tâm ngoại ngững mạnh, hiện tại Cực Viêm Chi Địa mở ra lần nữa, ta tự nhiên cũng muốn vào xem, chẳng lẽ ngươi cũng không có ý định này sao.

    Một đạo thanh âm chậm rãi trả lời.

    - Lạc Mộc, Nam Tương Tử, hai người các ngươi đều ở đây, vừa lúc Phá Ngọc cùng Bàn Thiên Lão Ma cũng ở đây, năm người chúng ta ở Cực Viêm Chi Địa liên thủ một phen, nếu có bảo vật,

    ReplyDelete