Question

I have built a calculator using FancyBox cash flow forecast (hit view forecast). Now I’ve made it I have hit a problem, how to print the contents of the Fancybox. Ideally I would just like the user to hit print in their browser and it prints the contents of the Fancybox. But I just can’t find or work out a solution.

Alternatively, giving the user the option to print when they are viewing the contents of the Fancybox via an icon would be great.

I have tried to set-up both options but failing miserably. Any ideas? Thank you

I have tried pure CSS. The best attempt was this:

    @media print {
body * {
display: none!important;
background: none!important;
}
body {
background: none!important;
}
#fancybox-wrap, #fancybox-wrap * {
display: block!important;
top: 0!important;
left: 0!important;
}
#fancybox-title, #fancybox-close {
display: none!important;
}
}

The problem is that the table layout doesn’t work.

Answer 1

This worked:

    @media print 
   { 
       body * { visibility: hidden; } 
       #fancybox-content * { visibility: visible; } 
       #fancybox-content {position:fixed; top: 5px; left: 5px; } 
   }