4

This works perfectly fine:

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script>

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:

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

TIA

UPDATE: 07/28/12

As @arttronics suggested, I put together a jsFiddle

To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)

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 href or content.

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!

TIA.

Update: 07/31/2012

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 iframe src="about:blank".

Any suggestions? Or do you see a way to fix the jsFiddle example?

Karl
  • 1,814
  • 1
  • 25
  • 37
  • 1
    Try using FancyBox HTML `inline player` and not `iframe player`. – arttronics Jul 27 '12 at 00:01
  • @arttronics I think that will work. I have to do more testing tomorrow. In the mean time, an up vote for you. Thanks. – Karl Jul 27 '12 at 00:34
  • Unfortunately, type inline does not allow me to replicate the behavior of the iframe type. With an iframe, I can have a button on the page being displayed in FancyBox which onclick() handler is coded like this `window.print()` and the viewer can have a nice print out of the FancyBox content. Even if my inline content appears to be a complete HTML document, the DOM does not see it as a document so the `print()` method prints the content of the main window. (I know I can print the content of a FancyBox by opening a new window, but I want to avoid that if possible.) – Karl Jul 27 '12 at 09:54
  • Notice that while this code opens FancyBox and the content is displayed, the call to `window.print();` does not work: `$.fancybox({'content':' Print Me

    Print Me

    ', 'Width':500,'Height':500, 'hideOnContentClick': false, 'type':'inline' });`     – Karl Jul 27 '12 at 10:39
  • @arttronics I want to use the iframe player. My question was, how to i get it to handly dynamic contect. The original question pointed how that the iframe player did not work with an href attribute that was set to the ID of a page element. It only works if href is pointed to a physical page. Please see original question for example code. – Karl Jul 27 '12 at 10:43
  • @arttronics - I saw your message about moving the answer. I hesitate doing that for (a) fear of screwing something up and maybe causing some up votes you've received to be lost; (b) SO is complaining about the stream of comments associated with this quesiton and (c) I'm not sure yet that it won't prove to be the answer which you'll understand why, after my next comment. – Karl Jul 27 '12 at 16:26
  • 1
    @arttronics please see http://jsfiddle.net/taa1953/P823J/. Note that only part of the contents of the FancyBox prints. And if you uncomment the `type` attribute, the content of the div no longer appears in the FancyBox. – Karl Jul 27 '12 at 16:34
  • If the idea to use `iframe` is to print the contents of fancybox, then check http://stackoverflow.com/a/11485923/1055987 – JFK Jul 28 '12 at 00:59
  • @JFK But as I read the code, that solution requires another window to open. If FancyBox loads the content into an iframe, and the content has a print button with `onclick="window.print();"` then there is no need for another window to open and the entire content of the FancyBox will print. Or so I expect it to work that way. I'm having difficulty generating dynamic content when type is an iframe. – Karl Jul 28 '12 at 02:58

2 Answers2

5

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

Janis
  • 8,593
  • 1
  • 21
  • 27
  • your solution for printing the contents of a FancyBox is the standard solution for doing this. However, I'm seeking a solution that does not require another window be opened (other than the printer setup dialog window) – Karl Jul 31 '12 at 12:12
  • with respect to your question, I'm not sure which one of the jsFiddles you are referencing as I've been trying many approaches. Regardless, here is a pure `iframe` example of what I'm trying to achieve: http://jsfiddle.net/taa1953/SA2rw/. My orignal thought had been if the FancyBox `iframe` player could display this `iframe` then I would have a nice looking report viewer. – Karl Jul 31 '12 at 12:58
  • 1
    So, you want to open that iframe? Then just do it :) - http://jsfiddle.net/qVrLr/ – Janis Jul 31 '12 at 13:37
  • Fantastic. I've tested your solution in IE 8, 9, current Chome and FF 8.x. Thank you very much. Please edit your answer to include your new jsFiddle example for clarity and I'll be happy to except it. @arttronics, it looks as if you have a bounty to pay. Though Janis has a bit of an advantage as the author of FancyBox ;) Thanks to both of you. – Karl Jul 31 '12 at 15:40
  • @Janis - you must have spent a ton of time on this. Nice work! – hardba11 Aug 01 '12 at 02:52
  • @Karl, I'll pay the Bounty to the best Answer when the Bounty period has ended. Sometimes, even the creator of a plugin can be unaware of all the possibilities of the API since a little jQuery can make a world of difference. – arttronics Aug 01 '12 at 04:49
  • @Janis, I noticed that your *Updated demo* for the [**jsFiddle**](http://jsfiddle.net/qVrLr/) only prints *around* 3 words per line. – arttronics Aug 01 '12 at 04:51
  • @arttronics Sounds perfectly reasonable to me. Actually, I had assumed that the bounty payment was automated and that it was awarded by SO once an answer was accepted. Per your message to Janis, I did not experience the 3 words per line printing issue. (Or I would not have accepted the answer). The text printed perfectly, for me, using the 3 browsers I mentioned in a test page that I set up. Note the `@media print` style sheet in the `myDocument` variable. Is there a margin or width setting that adversely affects your printing? – Karl Aug 01 '12 at 09:12
  • @Karl, here's info on the [**Bounty System**](http://meta.stackexchange.com/q/16065). The browser with issue per my previous message is for current version of **Firefox v14.1**. Here is a [**screenshot**](http://img842.imageshack.us/img842/6181/page1of5.jpg) using a Adobe PDF Printer plugin. Note this is only page 1 of 5. To be extra sure, I did a hard-copy and it looks the same. – arttronics Aug 01 '12 at 10:15
  • **Update:** I installed Firefox v13 Portable Edition (as I've notice a few other predominate FF v14 bugs) and Firefox v13 Portable has no issues. *Whomever reads this message and has standard Firefox v13, please print to PDF File (if you have that) and check if page prints correctly. Thank you.* Having said that, I think this could be another Firefox v14 bug. – arttronics Aug 01 '12 at 10:30
  • @arttronics one thing that might be causing the problem, if you've not change the `@media print` style, I had it set to this `p{margin:100px}`. because I was testing and not concerned about all the details. I think it should be set to `p{margin:100pt;}` (note: `points`, not `pixels`). I would be curious if that helps. – Karl Aug 01 '12 at 11:05
  • @Karl, I had previously tested without `margin` property altogether, only to get the same supersize-font causing ill effects in **Firefox v14.1** – arttronics Aug 01 '12 at 19:59
  • Folks, it's a bug causing this Firefox printing issue. Long story short: **Print Preview** via menu bar has Scale set at 200% at the same time scale is reported at 100% when using **CTRL+P** or the **Print Button** Properties Page (then Paper Quality/Advanced Tab). Solution: Ensure scale is ***really 100%*** by checking Print Preview via the menu bar. Cheers! – arttronics Aug 02 '12 at 13:22
  • **+1** @Janis, I've awarded the Bounty in full to you since [**CSS Media Queries**](http://www.w3.org/TR/css3-mediaqueries/#media0) is the best solution in this case. Thanks for an excellent answer! Cheers! – arttronics Aug 02 '12 at 13:27
0

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

Major Caveats

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.

Karl
  • 1,814
  • 1
  • 25
  • 37
  • 1
    don't mix pears and apples. the issue you mentioned with v1.3.4 has nothing to do with v2.x – JFK Jul 29 '12 at 16:28
  • @JFK, I fail to see how I was mixing pears and apples. My comment specifically referes to v1.3.4 and the intent was that if someone was trying the code, and happened to be trying that version of FB that there is a problem along with documented fixes. Just trying to keep someone from pulling their hair out. I appreciate your comments and support, and if you think my comment is unfair or inaccurate, I'll be happy to edit it. – Karl Jul 29 '12 at 18:40
  • IMHO, since your Answer is a complete failure in Chrome, it's not an acceptable answer and isn't bounty-worthy. Still, if improvements are made then that's a different story. – arttronics Jul 29 '12 at 21:33
  • @arttronics I appreciate your offer of a bounty. Hopefully, something will come of your generosity. But the bounty is not what motivates me. As the OP, i have a need. I've made progress, but as you say, the answer is not suitable for a public facing website (though it may be ok for some companys' intranet and that have tied down the desktop and deploy only IE for example). As to my comment about an earlier v. of FB, I'll remove it. However, I've been trying various vers. to get something to work. – Karl Jul 30 '12 at 00:05
  • 1
    @Karl, there is an alternate lightbox clone named Shadowbox. That lightbox also does ***not*** have a print feature, however, somebody made a print button for that. Perchance the ***same scheme*** in printing can be done form your Fancybox too! Here's that [**forum post**](http://shadowbox.1309102.n2.nabble.com/Little-help-required-to-add-print-function-to-shadowbox-tp7460728p7460850.html) with a little info (last line) which provides links as well. *Side note: I don't respond to posts at that site since the bulk of repeat questions can be found using the forum's search tools.* – arttronics Jul 30 '12 at 07:10