[Pro] Print this page action?

Hi, Is there an action to show a print (with a printer image) on a page? The idea is that only the information would be printed saying where the information came from but not include the headers and footers etc.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, there isn’t such an Action, but it could be made. But your question actually is in two parts. First, if you want portions of your page to be hidden when printed, and visible when viewed on screen, the normal way to do that is with @media references in your stylesheet, or separate stylesheets for print and screen. But in a normal Freeway layout (CSS-positioned) that’s going to look like WWII-era censors went at your page with scissors, leaving ugly holes behind. If you had an inline layout page, then hidden elements would allow the other elements on the page to slide up and over to fill in the gaps left where they were hidden, and the page would print as it should.

As far as making the page print, that’s a very simple JavaScript trick, supported in the overwhelming majority of currently-running browsers: window.print();.

So to work around these issues in a normal Freeway layout, you will need to make two pages – one as normal, and the other just for print. On the for-print page, you open the Page / Extended dialog, press New, and in the resulting sub-dialog, enter:

  • Name: onload
  • Value: window.print();

Then on your visual page, you make your little printer icon a link to open that new page in a small window, either with Paul’s Spawn New Window Action or the built-in Link to New Window Action. The little window will pop up, and the print dialog or sheet will issue from that daughter window. The user presses Print or Okay or whatever, and your cut-down layout glides into the out-tray.

It’s a bit more work, so you’ll want to balance doing all this against how many pages you have like this, along with how much pain it would be to re-build your site in a fully-inline layout.

If you do have a fully inline layout, then you simply need to mark the things you don’t want to appear when printed using a classname (I usually use screen-only) and if you have anything that you want to appear only when a page is printed, you’ll want to put those elements in the layout and mark them with an apposite classname like print-only. Then you need a print stylesheet, and you’ll want to use my External Stylesheets Action to add it to your page(s). With the print stylesheet properly applied (choose Print from the Media picker), then it’s all down to your stylesheet:

/*regular screen stylesheet*/
.print-only { display: none; }
.screen-only { display: auto; }

/*print stylesheet*/
.print-only { display: auto; }
.screen-only { display: none; }

There are lots of other more specialized things you can do – remember, background images and background colors will not print by default, so if you have any reversed type, you need to override that in your print stylesheet. Small type can be made larger, overall page width can be conformed to a normal printer a4 format, etc. But again, that’s specific to your pages.

All of this will seem like a lot of work, and make no mistake, it certainly is. But when you are working on a very large site, with thousands of pages, it will be a very small percentage of how much work it would be to duplicate all of those pages and add a print button to the original.

Walter

On Jun 26, 2012, at 9:06 AM, Elizabeth wrote:

Hi, Is there an action to show a print (with a printer image) on a page? The idea is that only the information would be printed saying where the information came from but not include the headers and footers etc.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for this info Walt - looks like I will have to give this a trial on a test page first.

Elizabeth

On 26/06/2012, at 11:36 PM, Walter Lee Davis wrote:

No, there isn’t such an Action, but it could be made. But your question actually is in two parts. First, if you want portions of your page to be hidden when printed, and visible when viewed on screen, the normal way to do that is with @media references in your stylesheet, or separate stylesheets for print and screen. But in a normal Freeway layout (CSS-positioned) that’s going to look like WWII-era censors went at your page with scissors, leaving ugly holes behind. If you had an inline layout page, then hidden elements would allow the other elements on the page to slide up and over to fill in the gaps left where they were hidden, and the page would print as it should.

As far as making the page print, that’s a very simple JavaScript trick, supported in the overwhelming majority of currently-running browsers: window.print();.

So to work around these issues in a normal Freeway layout, you will need to make two pages – one as normal, and the other just for print. On the for-print page, you open the Page / Extended dialog, press New, and in the resulting sub-dialog, enter:

  • Name: onload
  • Value: window.print();

Then on your visual page, you make your little printer icon a link to open that new page in a small window, either with Paul’s Spawn New Window Action or the built-in Link to New Window Action. The little window will pop up, and the print dialog or sheet will issue from that daughter window. The user presses Print or Okay or whatever, and your cut-down layout glides into the out-tray.

It’s a bit more work, so you’ll want to balance doing all this against how many pages you have like this, along with how much pain it would be to re-build your site in a fully-inline layout.

If you do have a fully inline layout, then you simply need to mark the things you don’t want to appear when printed using a classname (I usually use screen-only) and if you have anything that you want to appear only when a page is printed, you’ll want to put those elements in the layout and mark them with an apposite classname like print-only. Then you need a print stylesheet, and you’ll want to use my External Stylesheets Action to add it to your page(s). With the print stylesheet properly applied (choose Print from the Media picker), then it’s all down to your stylesheet:

/*regular screen stylesheet*/
.print-only { display: none; }
.screen-only { display: auto; }

/*print stylesheet*/
.print-only { display: auto; }
.screen-only { display: none; }

There are lots of other more specialized things you can do – remember, background images and background colors will not print by default, so if you have any reversed type, you need to override that in your print stylesheet. Small type can be made larger, overall page width can be conformed to a normal printer a4 format, etc. But again, that’s specific to your pages.

All of this will seem like a lot of work, and make no mistake, it certainly is. But when you are working on a very large site, with thousands of pages, it will be a very small percentage of how much work it would be to duplicate all of those pages and add a print button to the original.

Walter

On Jun 26, 2012, at 9:06 AM, Elizabeth wrote:

Hi, Is there an action to show a print (with a printer image) on a page? The idea is that only the information would be printed saying where the information came from but not include the headers and footers etc.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options