Javascript: Error 'Object Required'. I can't decipher it. Can you?

Question

I am using a javascript called 'Facelift 1.2' in one of my websites and while the script works in Safari 3, 4b and Opera, OmniWeb and Firefox it does not in any IE version. But even in the working browser i get the following error I cannot decipher.

Maybe in due time—with more experience in things Javascript—I will be able to but for now I thought I would ask some of you, here at SO.

The following is the error popup i get in IETester testing the page for Interet Explorer 6,7 and 8:

The following is from the Firebug console in Firefox 3.0.6:

The website is: http://www.457cc.co.nz/index.php In case it helps you see the problem mentioned in action.

I have also looked up what line 620 corresponds to which is: "line 76" is:

this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');

which is part of this block of code (taken from the flir.js):

// either (options Object, fstyle FLIRStyle Object) or (fstyle FLIRStyle Object)
,init: function(options, fstyle) { // or options for flir style
    if(this.isFStyle(options)) { // (fstyle FLIRStyle Object)
        this.defaultStyle = options;
    }else { // [options Object, fstyle FLIRStyle Object]
        if(typeof options != 'undefined')
            this.loadOptions(options);

        if(typeof fstyle == 'undefined') {
            this.defaultStyle = new FLIRStyle();
        }else {
            if(this.isFStyle(fstyle))
                this.defaultStyle = fstyle;
            else
                this.defaultStyle = new FLIRStyle(fstyle);
        }
    }

    this.calcDPI();

    if(this.options.findEmbededFonts)
        this.discoverEmbededFonts();

    this.isIE = (navigator.userAgent.toLowerCase().indexOf('msie')>-1 && navigator.userAgent.toLowerCase().indexOf('opera')<0);
    this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');

    if(this.isIE) {
        this.flirIERepObj = [];
        this.flirIEHovEls = [];
        this.flirIEHovStyles = [];    
    }
}

The whole script is also available on my server: http://www.457cc.co.nz/facelift-1.2/flir.js

I just don't know where to start looking for the error, especially since it only affects IE but works in the rest. Maybe you guys have an idea. I would love to hear them.

Thanks for reading. Jannis

PS: This is what Opera's error console reports:

JavaScript - http://www.457cc.co.nz/index.php
Inline script thread
Error:
name: TypeError
message: Statement on line 620: Cannot convert undefined or null to Object
Backtrace:
  Line 620 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
                    document.body.appendChild(test);
  Line 70 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
            this.calcDPI();
  Line 2 of inline#1 script in http://www.457cc.co.nz/index.php
            FLIR.init();
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

score 7 · Accepted Answer · edited Feb 26 '09 at 21:59

7

I agree with tvanfosson - the reason you're getting that error is quite likely because you're calling init() before the page is done loading, so document.body is not yet defined.

In the page you linked, you should move the following code to the bottom of the page (just before the closing html tag:

<script type="text/javascript">
    FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
    FLIR.auto();
</script>

Even better, you should attach the initialization to the document's ready event. If you do it this way, there is no need to even move your javascript to the bottom of the file. Using jquery:

$(document).ready( function(){
    FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
    FLIR.auto();
});

More on jquery's document.ready event »

edited Feb 26 '09 at 21:59

Ben Blank

54,908
28
127
156

answered Feb 26 '09 at 21:20

Kenan Banks

207,056
34
155
173

Thank you. Works like a charm! I cannot believe I wasted 6 hours on this yesterday with a solution being as simple as including a document ready statement. – Jannis Feb 26 '09 at 21:26
No problem. Every Javascript ninja has once battled with the ol' "accessing the DOM before page load" error. Pretty common. – Kenan Banks Feb 26 '09 at 22:11

tvanfosson · Answer 2 · 2009-02-26T21:55:38.720

0

Edit Answer left for context. See @Triptych's (accepted) answer for the correct resolution.

My suggestion is to move the inclusion of the javascript to the end of your mark up. I think what is happening is that the code is executing before the DOM is completely loaded and thus the document.body is null when you try to reference it in determining the maxHeight style property. Moving the inclusion of the javascript to the end of your markup should be enough to guarantee that the body of the document is loaded at least and avoid this particular error.

 ... rest of html....

    <script type='text/javascript'
            src='http://www.457cc.co.nz/facelift/flir.js'>
    </script>
 </body>
 </html>

edited Feb 26 '09 at 21:55

answered Feb 26 '09 at 21:11

tvanfosson

524,688
99
697
795

Almost. Including the file doesn't actually access the DOM. He has a script block in the page that actually runs the init script that causes the answer. See my answer. – Kenan Banks Feb 26 '09 at 21:21
Thanks for your answer I don't think I would have figured out that it has to do with the page loading any time soon.. – Jannis Feb 26 '09 at 21:26
@Triptych -- I was just going by the error. Hadn't actually looked at his page. Good catch. I'll leave my answer here for context since you reference it. +1 to you. – tvanfosson Feb 26 '09 at 21:54

score 0 · Answer 3 · edited Nov 19 '12 at 01:36

0

Install .net Framework v2 and solve the problem.

edited Nov 19 '12 at 01:36

Luca

9,259
5
46
59

answered Apr 17 '09 at 22:06

Javascript: Error 'Object Required'. I can't decipher it. Can you?

3 Answers3