FancyBox Displays DIV Content as an iFrame Type
This works great:
<script type="text/javascript"> $(document).ready(function() { $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'}); }); </script> In this way, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and this page is encoded as follows:
<body> <div id="pg"></div> <script type="text/javascript"> document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>"; </script> </body> FancyBox opens, but the text does not appear. (The text "text me now" is displayed in the #pg div element. Note that it is assigned a DIV innerHTML at the end of the page.)
Basically, I want to know if there is a way to dynamically initialize the DIV innerHTML property and display it as an iFrame of type FancyBox? (The contents of the iFrame will have a button that prints the iFrame document.)
TIA
UPDATE: 07/28/12
As @arttronics suggested, I put together jsFiddle
To summarize, ultimately, the goal is to be able to click the button contained within the FancyBox, which prints the entire contents of the FancyBox without , opening another window. (I want to use FancyBox as a report viewer for content processed by Javascript.)
I assume that I need to display content using the FancyBox iframe player, but I could be wrong.
jsFiddle shows:
FancyBox can display text that is checked as an HTML page using the built-in player. Text can be referenced via href or content .
However, when the player is an iframe and the content comes from href , the FancyBox container is empty. If the content is derived from the content attribute, the FancyBox shows a 404 error.
Just comment and uncomment the jsFiddle code to understand what I mean.
Any ideas on how I can accomplish my task are appreciated and get a vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: The iframe viewer works, but not in the FancyBox
As you can see, I tried several ways to display an iframe in a FancyBox. And while the FancyBox displays the contents of the iframe , the print function breaks.
I think one way to solve this problem would be to write the contents of myContent var to the FancyBox after loading it, but I cannot (A) find the correct DOM node to write to and (B) I cannot get the FancyBox to display the iframe using its iframe player when iframe src="about:blank" .
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect <iframe src="#myID"></iframe> open the if element myID in the iframe?
If you want to print the contents of fancyBox, you can add a print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - to create and update iframe content
As often happens, I looked at things back. The solution (with reservations) is that instead of displaying the div element using an iframe player, hide the iframe in html and display it using the built-in player.
See this working example: jsFiddle
This solves the problem of printing dynamic content without opening another window. In addition, if the text overflows with the FancyBox, all content is still printed. (This is what I couldn't get when I printed FancyBox and changed the visibility styles of page styles to hidden).
Key reservations
I tested this in IE 8 and it works, however I still can't get it to work in Chrome.
One of the reasons for using this approach was my suggestion that I could include the @media print style in the content of a dyanmic page. For some reason this method does not work (in IE). However, inline styles work just like HTML markup tags (note the <strong> in the jsFiddle: var myContent example). So it's weird.