CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8fancyboxcompatibility-mode
spilliton
spilliton

Reputation: 3921

Fancybox gets javascript "not implemented" error in IE8 compatibility mode

When doing a modal pop up using jquery.fancybox-1.2.6.js it works on every platform I have tried except IE8 when set to compatibility mode.

When the modal tries to display I get a javascript "not implemented" error on the page that keeps the modal from ever popping up. It gives the line number (line 207) the error occurs on in jquery.fancybox-1.2.6.js and this contains the following

 $("#fancy_content")[0].style.removeExpression("height");

I did some old school fact finding with alert statements and it seems .style works, it is the removeExpression function that is "not implemented".

Anyone been able to get around this issue?

Upvotes: 0

Views: 4909

Answers (3)

Rick S
Rick S

Reputation: 16

I kow this is an old question, but here are my two cents for posterity...

I ran into the same problem when I upgraded my sites from jQuery version 1.4.2 to 1.8.3. The problem seems to be in how fancy box determined if the boxModel is present, via this code:

ieQuirks = $.browser.msie && !$.boxModel;

In newer versions of jQuery $.boxModel returns undefined (it was deprecated in 1.3) which is falsey, making the test return true for all browsers. Using $.support.boxModel rather than $boxModel fixed the problem for me:

ieQuirks = $.browser.msie && !$.support.boxModel;

Now, those blocks of code are not entered unless it is for one of the intended browsers.

Upvotes: 0

naugtur
naugtur

Reputation: 16915

You already posted an answer, but there is something I think might be worth trying.

.style.removeExpression is what I expect to be not implemented. The code is there to help quirksmode do the right sizing.

so instead of 

$("#fancy_content")[0].style.removeExpression("height");

try doing

$("#fancy_content").height('auto')

and later

$("#fancy_content").height($(window).height() - pad * 2 );

the same thing with the width.

I'm not sure if dimensions setting is important here, it might be important when there is a lot of content and the div might scale too big. Try it with lots of content or stick a big image there with firebug or something :)

Upvotes: 0

spilliton
spilliton

Reputation: 3921

I was able to comment out offending parts and it appears to work fine for me now:

//This was causing error in IE8 in compatibility mode
//            if (oldIE || ieQuirks) {
//                $("#fancy_content")[0].style.removeExpression("height");
//                $("#fancy_content")[0].style.removeExpression("width");
//            }

            if (pad > 0) {
                width += pad * 2;
                height += pad * 2;

                $("#fancy_content").css({
                    'top': pad + 'px',
                    'right': pad + 'px',
                    'bottom': pad + 'px',
                    'left': pad + 'px',
                    'width': 'auto',
                    'height': 'auto'
                });

//This was causing error in IE8 in compatibility mode
//                if (oldIE || ieQuirks) {
//                    $("#fancy_content")[0].style.setExpression('height', '(this.parentNode.clientHeight - ' + pad * 2 + ')');
//                    $("#fancy_content")[0].style.setExpression('width', '(this.parentNode.clientWidth - ' + pad * 2 + ')');
//                }

Seems wierd that it works without that, but maybe it won't work for everybody depending on how they are using the fancybox...

Upvotes: 1

Related Questions