This works perfectly fine:
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
As @arttronics suggested, I put together a jsFiddle
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via
However, when the player is an
iframe and the content comes from
href, then the FancyBox container is empty. If the contents comes from the
content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the
iframe in FancyBox. And while FancyBox does display the contents of the
iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an
iframe using its iframe player when the
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that
<iframe src="#myID"></iframe> would open an element having id
myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an @media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the
<strong> tag in the jsFiddle example: var myContent). So something is strange.
©2020 All rights reserved.