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

Question

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?

Answer 1

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...

Answer 2

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 :)