document.body is null

views:

623

answers:

+1 Q:

document.body is null

I've got a page where I'm using Mootools 1.2.4 and MediaboxAdvanced as a lightbox. I can't seem to get the thing working because of a particular javascript error

document.body is null

at the initialization of Mediabox:

$(document.body).adopt(
     $$([
          overlay = new Element("div", {id: "mbOverlay"}).addEvent("click", close),
          center = new Element("div", {id: "mbCenter"})
     ]).setStyle("display", "none")
);

The page is here. If yo uclick on the guy's name, picture, or the More Info button on the bottom right, it is supposed to launch the Mediabox. Via Firebug, I have confirmed that the CSS is loading, mootools is loading, and the Mediabox script is loading; all the paths to images and everything are correct as well.

Any ideas?

+1 A:

You may only be able to use $ on an element returned from getElementById. A simple workaround is to instead use $$.

$$('body')[0].adopt...

Randy Simon 2010-03-02 14:19:46

Brilliant! Thanks so much!

Honus Wagner 2010-03-02 14:38:00

also keep in mind the reason why it does not work is in your common.js: `function $(id) { return document.getElementById(id);}` - when mootools finds the $ is already defined, it drops into compatibility mode and refers to document.id as the alias for $. you can wrap calls to $ through mootools in an anon function like so: `(function($) { ... do stuff using $ })(document.id);` or you can remove the function from common.js as the mootools one will replicate the effect.

Dimitar Christoff 2010-03-02 15:24:05

Understood. I'm not going to mess with it as it seems to be quite stable at this time. Your help was truly invaluable.

Honus Wagner 2010-03-02 18:41:26

ansaurus

tags:

views:

answers:

document.body is null

related questions