Question

The code below works in Chrome and IE(8), but firefox says that “overlay is not defined”.
Using this.overlay or [this.overlay] doesn’t work either. What causes the difference and how to fix it in Firefox?

the code:

var ol = {
overlay: document.getElementById("overlay"),
build: function(e){
    //todo: build elements dynamically
},
open: function(){
    overlay.style.display = "block";
    centerVertically();
    ol.build();
},
close: function(){
    overlay.style.display = "none";
}
};

Thanks in advance.

EDIT:
The solutions work standalone (JSfiddle ), but when I use the code in my project it fails. It makes absolutely no sense. See this screencap mashup:
Image link

EDIT #2:

Moving my script tag to the bottom of DOM fixed everything. I don’t know why I didn’t think of that. That was probably the issue from the start – Chrome and IE just handle my stupidness better even with closure problems.

But, since I received your replies I now write safer code and know how to properly access object’s properties inside the object. Thanks!

Answer 1

Just like you do when you are referencing a method, you just need to add the object scoping when you are referencing ‘overlay’.

So in your function just do “ol.overlay.style.display” and you should be fine.

var ol = {
    overlay: document.getElementById("overlay"),
    build: function(e){
        //todo: build elements dynamically
    },
    open: function(){
        ol.overlay.style.display = "block";
        centerVertically();
        ol.build();
   },
   close: function(){
        ol.overlay.style.display = "none";
   }
};
ol.open();

The way you have it now, it’s looking for a global JS variable outside of the ‘ol’ object scope.

EDIT As @Matt Ball refers to in a comment below (something I meant to add to this). You should make sure that you only get your ‘overlay’ element when the DOM has finished loading.

You could do that through a document.ready pattern or you could do a lazy loading pattern within your ‘ol’ functions. I’d recommend the document.ready pattern and changing your ‘ol’ object to have the overlay default to null and define it at document ready (or put it in an init type method that you call on document ready), either is fine.