Question

I am trying to load HTML into the fancybox popup. Everything works great in every other browser but IE 8 (I haven’t checked other versions of IE). The popup opens but there is nothing in it.

This is my js:

$(".fancyPopup").live('click', function(ev){            
    ev.preventDefault();            
    var selectedStrip =  '#' + $(this).attr('id');          
$(".fancyPopup").live('click', function(ev){            
    ev.preventDefault();            
    var selectedStrip =  '#' + $(this).attr('id');          
    $.fancybox(     
        {
        href: '/snapav/mkting/html/rackPowerStripSuggestions.html',
        type: 'ajax',
        fitToView   : false,
        afterShow: function(){          
            hideSeries();           
            $('.strips:not("' + selectedStrip + '")').hide('slow', function(){              
                $('ul' + selectedStrip).addClass('flagged');                            
            });                 
        }       
        });     

});     

Any help is MUCH appreciated.

Answer 1

This was actually 2 issues.

1. To get the content to fill the popup in IE, I needed to add a DOCTYPE and all that info that goes into a plain HTML page. Wasn’t aware of that.

2. IE has a difficult time with animate. You have to have the exact property match up in your CSS that you are animating. So if in your CSS you have “padding: 4px 0”, you have to break it down to “padding-top: 4px and padding-bottom: 4px” in your css, because you can’t animate shorthand CSS in jQuery.

Lots learned here! Hopefully this can help someone else in the future.