Tuesday, May 22, 2007

To be a JS Ninja

Today I had three wishes.

  1. I wish that I was a JavaScript ninja, with a deep, abiding understanding of how the DOM was implemented in all of todays major browsers, particularly IE7 and why it never works the way you think that it should.

  2. I wish that when I get stuck like I got stuck today that Google was able to return more meaningful results.

  3. I wish that I had more web designer friends that are JavaScript ninjas, that do understand the DOM, particularly as it relates to IE7.

So there you have it. My three wishes for the day. Here's the back story, and a petition for someone's superior skill and knowledge.

The application that I am building at work would be greatly benefited by a framework that would accommodate light boxes. Yes, there are lots of implementations out there, but none of them were quite what I was looking for, so I set out to modify one to suit my purposes. Everything was up and running happy and fine in good 'ol Firefox. I jumped over to IE to make sure things were equally as happy, and found that seemingly simple things really weren't as simple as I had hoped.

The function would look like this:

function doStuff()
{
var node = $('myUpdateDiv1');
node.className = 'class1, class2' //class 2 overrides some attributes of class1
node.innerHTML = '... nice HTML chunk with a style tag
and other stuff that comes from
an AJAX call ...';

node = $('myUpdateDiv1');
var box = new lightbox(node);
box.activate();
}

And in Firefox if the innerHTML has a <style> tag that defines class2, then the div will assume the class2 style. However, IE really really hates it. So I ended up with code like this to solve the problem.

function doStuff()
{
var node = $('myUpdateDiv1');
node.replace(... HTML with embedded style right on the tags
coming from an AJAX call ...
);
node = $('myUpdateDiv1');
var box = new lightbox(node);
box.activate();
}

IE seems to require that if the style is going to work, that the styles be embedded on the tags in style attributes, and that the entire div be replaced, as innerHTML would replace the markup, but the styles wouldn't appear to take. I am sure that these issues have something to do with my non-ninja design, DOM and JavaScript skills. If you have a better answer that would allow the AJAX call to return an HTML chunk that could take a chunk like this, and render it in IE, I would be VERY happy. It would really simplify some aspects of this process that I am working on. It's critical that the web page be agnostic to the styling of the light box, as it would be much preferable for the implementer of the remote AJAX call to set his/her own styles for the box.

Here is a very simple toy page that I have been playing with. It's working in both IE and FF, but I would really like to get away from the node.replace(), and style on each HTML element if at all possible.

Can anyone tell me what I'm not understanding?

1 comment:

paulm said...

your wishes may be granted if you worked with us at Move (Networks). Let me know if you are interested in learning more about what opportunities we have.