the lovely "Moving Boxes" inside the infamous FancyBox

[davebandit]

Ok, I ran into a weird problem and know there is a simple solution, but my brain is having trouble. I have tested this both in Safari and Firefox. The problem is not happening in Safari, but only in Firefox. This leads me to believe it may just be a syntax problem or just something I am missing.

I am trying to run the Moving Boxes (https://css-tricks.com/moving-boxes/) from within FancyBox (http://fancybox.net/) pulling in the page via an iframe.

The script functions, even when the iframe first loads, but the problem is that the layout is broken as if the .js file didn’t effect the CSS properly when the iFrame loaded, however if I reload the contents of the iframe in Firefox then the layout is fixed.

here is how I am calling fancybox

Code:

$(document).ready(function(){
$(“a.media”).fancybox({
‘padding’: 0,
‘frameWidth’: 1000,
‘frameHeight’: 600,
‘overlayOpacity’:0.6,
‘hideOnContentClick’: false,
});
});

Here is the anchor link to load the iFrame

Code:

Discography

Here is a picture to show what I mean… Note, these are from within the iFrame, notice the corner with the FancyBox close graphic. Also you can scroll down in the iFrame and see that the scripts are working but the CSS from the plugin is not working.

[img]http://i116.photobucket.com/albums/o15/davebandit/webhelp/iframeissue.jpg[/img]

As you can see I am using the bone stock index.html page for testing when I noticed the problem. I did make some basic changes to accommodate the iFrame like updating the script locations prepending with "../" and changing the page name to media.php etc etc.

If I am forgetting something let me know. Happy to help clarify anything also.

Thanks for all the help in advance!

-DB

[kb2tfa]

sorry if I missed something. are these separate divs?

[davebandit]

No sorry, I just created one graphic of the two different screen shots in Firefox. The first part shows what it looks like upon the initial loading of the iFrame with FancyBox, and the bottom half is the same iFrame after simply re-loading the contents of the iFrame.

Hope that answers the question.

-DB

[davebandit]

Yes, the FancyBox popup will be displaying a list of Albums/Movies not unlike coverflow and the videos will pay dynamically based on the selection from the Moving Boxes viewer. All within Fancybox.

I had tremendous issues getting videos to play properly using inline content with FancyBox. So I figured sticking with that theory I would start off the bat with using the iFrame method.

Please correct me if I am wrong.

Thanks!

-DB

[davebandit]

I wonder if there is a way to load the javascript exclusively in the iFrame. There must be something funky I am missing because it is working in safari.

Thanks,

DB

[Author]

Posts