Printing the contents of a Fancybox when opened, printing contents of page when closed

Question

I am trying to give the user the ability to print the contents of a Fancybox when the Fancybox is open. The content of the Fancybox is Google Maps directionsPanel inside of its own div. Basically I want to give a user the ability to print the directions they just finished searching for.

However, when the Fancybox is not open, ie when they are looking at the content of the page that includes the Map. I want the user to have the ability to print the page.

I have tried using CSS to create sections of code as "printable" and "non-printable", but obviously this defeats my purpose.

Here is my current code:

   <style type="text/css">

    -->#printable { display: none; }

    @media print
    {
        -->#non-printable { display: none; }
        -->#printable { display: block; }
        body * { visibility: hidden; }
        #directionsPanel * { visibility: visible; }
        #directionsPanel { position: absolute; top: 1px; left: 1px; }

    }
    </style>



  </head>
  <body onLoad="initialize()">
    <table>
        <tr>
            <td>
                <input name="start_address" id="address" type="text" value="Enter Address" onFocus="doClear(this)" size="45"/>
            </td>
        </tr>
        <tr align="center">
            <td align="center">
                <a id="portDirectionBtn" class="fancybox" href="#directionsPanel" onClick="calcRoute();">Get Directions</a>
            </td>
        </tr>
    <div id="map_canvas" style="width:300px; height:300px">
    </div>
    <div id="printable">
    <div id="directionsPanel">
        <a href="javascript:window.print();">Print!</a><br />
    </div>
    </div>
    </table>

  </body>
</html>

Plus obviously the Fancybox and Google Maps scripts. If that code would help please let me know. Any help is appreciated!

have you checked http://stackoverflow.com/a/11739627/1055987 ? — JFK, Oct 18 '12 at 07:08

score 0 · Answer 1 · answered Oct 17 '12 at 20:26

Open the fancybox in an iframe and call the print from inside it. Since it's inside the iframe, the print command will only see it and therefore print it. And if the fancybox is closed, you can call print from another button(outside iframe) to print the whole page

Printing the contents of a Fancybox when opened, printing contents of page when closed

1 Answers1