jasonday / printthis

jQuery printing plugin; print specific elements on a page

printThis

Printing plug-in for jQuery

Try the Demo

Features

• Print specific & multiple DOM elements
• Preserve page CSS/styling ** or add new CSS; the world is your oyster!
• Preserve form entries
• Canvas support

Usage

Basic

$('selector').printThis();

Advanced Features

$('#kitty-one, #kitty-two, #kitty-three').printThis({
    importCSS: false,
    loadCSS: "",
    header: "<h1>Look at all of my kitties!</h1>"
});

Troubleshooting

Check the printThis wiki for common issues and questions

Covers common issues related to styling and printing limitations regarding page breaks

Options

Now with TypeScript definitions.

debug

Debug leaves the iframe visible on the page after printThis runs, allowing you to inspect the markup and CSS.

importCSS

Copy CSS <link> tags to the printThis iframe. On by default.

importStyle

Copy CSS <style> tags to the printThis iframe. On by default.

printContainer

Includes the markup of the selected container, not just its contents. On by default.

loadCSS

Provide a URL for an additional stylesheet to the printThis iframe. Empty string (off) by default.

pageTitle

Use a custom page title on the iframe. This may be reflected on the printed page, depending on settings. Blank by default.

removeInline

Eliminates any inline style attributes from the content. Off by default.

removeInlineSelector

Filter which inline style attributes to remove. Requires removeInline to be true. Accepts custom CSS/jQuery selectors. Default is "*"

printDelay

The amount of time to wait before calling print() in the printThis iframe. Defaults to 1000 milliseconds. Appropriate values depend heavily on the content and network performance. Graphics heavy, slow, or uncached content may need extra time to load.

header & footer

A string or jQuery object to prepend or append to the printThis iframe content. null by default.

$('#mySelector').printThis({
    header: "<h1>Amazing header</h1>"
});

$('#mySelector').printThis({
    footer: $('.hidden-print-header-content')
});

jQuery objects are cloned rather than moved.

base

The base option allows several behaviors. By default it is false, meaning a the current document will be set as the base URL.

If set to true, a <base> attribute will be set if one exists on the page. If none is found, the tag is omitted, which may be suitable for pages with Fully Qualified URLs.

When passed as a string, it will be used as the href attribute of a <base> tag.

formValues

This setting copies the current values of form elements into the printThis iframe. On by default.

canvas

Canvas elements will be copied to the printThis iframe and you can call printThis directly on a canvas element if you choose.

doctypeString

A doctype string to use on the printThis iframe. Defaults to the HTML5 doctype.

removeScripts

Deletes script tags from the content to avoid errors or unexpected behavior during print. Disabled by default.

copyTagClasses: true

Copies classes from the body and html tags into the printThis iframe.
Accepts true, "b", "h", or "bh" to test for "b" and "h" for body and html tags, respectively.

copyTagStyles: true

Copies style attributes from the body and html tags into the printThis iframe. Added to provide support for CSS Variables. Accepts true, "b", "h", or "bh" to test for "b" and "h" for body and html tags, respectively.

beforePrintEvent: null

Function to run inside the iframe before the print occurs.
This function has not been validated on all browsers.

beforePrint: null

Function called before the iframe is populated with content.

afterPrint: null

Function called after the print and before the iframe is removed from the page.
This is called even if debug: true, which does not remove the iframe.

All Options

$("#mySelector").printThis({
    debug: false,               // show the iframe for debugging
    importCSS: true,            // import parent page css
    importStyle: true,          // import style tags
    printContainer: true,       // print outer container/$.selector
    loadCSS: "",                // path to additional css file - use an array [] for multiple
    pageTitle: "",              // add title to print page
    removeInline: false,        // remove inline styles from print elements
    removeInlineSelector: "*",  // custom selectors to filter inline styles. removeInline must be true
    printDelay: 1000,           // variable print delay
    header: null,               // prefix to html
    footer: null,               // postfix to html
    base: false,                // preserve the BASE tag or accept a string for the URL
    formValues: true,           // preserve input/form values
    canvas: false,              // copy canvas content
    doctypeString: '...',       // enter a different doctype for older markup
    removeScripts: false,       // remove script tags from print content
    copyTagClasses: true,       // copy classes from the html & body tag
    copyTagStyles: true,        // copy styles from html & body tag (for CSS Variables)
    beforePrintEvent: null,     // function for printEvent in iframe
    beforePrint: null,          // function called before iframe is filled
    afterPrint: null            // function called before iframe is removed
});

Please read

• "It's not working" without any details is not a valid issue and will be closed
• A url, or html file, is necessary to debug. Due to the complexities of printing and this plugin, an example is the best way to debug
• When troubleshooting, set debug: true and inspect the iframe. Please report your findings when reporting an issue
• Every user should be active in the debugging process

ToDo:

• Look at alternative to setTimeout ($.deferred?)

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

printthis's Issues

Wait images and font-face load

Hi,

Is it possible to force printThis() to wait all page elements to load?

I am having issues trying to print elements with font-face using Google Chrome. The first time i try to print, the text is empty, but if i cancel and try again, it is printed fine.

Thanks!

In Internet Explorer, sometimes the entire page prints

This is probably related to #26. I initially thought this was an issue strictly with IE9, but I came across it in IE11 as well. On one page of my site, printThis works great in IE11 (still buggy in IE9), but there's another page where printThis doesn't work, and prints the entire page instead in all versions of IE. There aren't any discernible differences. Printing works fine in Firefox and Chrome on all of these pages.

My solution was to replace this:

$iframe[0].contentWindow.focus();
$iframe[0].contentWindow.print();

with

if (document.queryCommandSupported('print')) {
    $iframe[0].contentWindow.document.execCommand('print', false, null);
} else {
    $iframe[0].contentWindow.focus();
    $iframe[0].contentWindow.print();
}

This relies on execCommand('print', false, null) in browsers that support it, and falls back to print() for browsers that don't (Firefox). I haven't performed extensive testing on this yet, but it seems to work for my purposes for now. Any issues with using execCommand('print', false, null)?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of jasonday/printThis!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jasonday/printThis is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jasonday/printThis",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I can print a div with a background color?

I Wanna print a div with a background color, but in document not have colors, only border colors

Page Title characters not recognized on IE

Page Title characters not recognized when I print page part on IE.
In my config:
pageTitle: "Гарчиг",

How to solve this?

Table cell background colors not showing

I am unable to print a table cell "" background color in any browser. The background colors display fine on the screen in the table to be printed. Other CSS table values like border width and font color work fine.

Width of print area in IE 9 with altered zoom level

In IE 9 when I set the zoom level of the browser to greater than 100%, the size of the html elements on the print changes. Any way to hard code the width of the div to be printed. I tried setting the width to a point value like "500pt", but it did not work.

This is not an issue in FF and Chrome. All works great in those browers when broswer zoom level is modifed.

Chart width clipped in Chrome

Hi! Really like your library!

I found this problem with Chrome and DevExtreme charts.

http://jsfiddle.net/nphwtrrL/

Resize the result window to the maximum and hit the print button. Notice the chart is clipped to the right. Try the same thing in Firefox and the chart is correctly sized.

Value should be quoted.

line 156 should have the quotes by the value as well, otherwise it crashes for complicated values:
$doc.find('input[name="' + $name + '"][value="' + $value + '"]').attr('checked', 'checked');

print.css issues

print.css file is correctly loaded but I can't get border-collapse to work, is there any printThis related issue for css? ie are they parsed to some extent?

regards

restore page as after print window.location.reload()

Thank you for printThis. I'm having only one issue. I'm printing bunches of divs from a window.open that was spawned for a new tab. As the print kicks off something about the iframe changes my spawned layout on the screen..it sort of empties it out. The print format appears fine and is populated but I need a hook somewhere to reload the emptied out layout so that the initial page they were wanting to print looks as it did before. I tried a window.location.reload() but I can't seem to get it in the right spot....it breaks the iframe populate. I wasn't sure where to put it with regard to the timers. I see where the iframe is deleted but it didn't work to try it after that. Any ideas?
Thanks!

Table not printed in full

Hello,

when I try to print a long HTML table, it isn't printed in full, it just gives the first page, and then it gets cut off.

<style> removed from parent

When using the importStyle option, the <style> tags were being moved to the chile (print) iframe and being removed from the parent. Used a $.clone to resolve.

Uncaught TypeError: undefined is not a function

So I'm trying to use this for my asp page.
I included these at the head section:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/36032609/printThis.js"></script>

and this is the division that I want to be printed:

<div id="viewentry" class="modal hide fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div id="viewMdlBody" class="modal-body" style="min-height:400px;">
    </div>
    <div class="modal-footer">
        <button id="btn" >Print</button>
        <button id="createlessBackBtn" class="btn" data-dismiss="modal" aria-hidden="true">Back</button>
    </div>
</div>

And lastly, I fired the event using this:
$(document).ready(function () {
$('#btn').click(function () {
$('#viewentry').printThis();
});
});

But in the end when I go to the console, it says something like this:

Uncaught TypeError: undefined is not a functionStoreVisitView.aspx:57 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 m.event.add.r.handle

IE9 Style Problems

Awesome plugin. It's working great for every browser and version I need aside from IE9. I've spent time in debug mode and the iframe is styled correctly with all the styles I've imported, however when the page is actually printed none of the styles are being respected. I'm sure there are IE9 specific bugs when it comes to print styles, but even a basic text-align: center; isn't being respected on my section headings.

Have you seen these issues before or know why this would be the case for that browser?

Thanks!

Error when print in modal jQuery UI dialog

Hello.
I'm using last verion of jQuery and jQuery UI (both 1.11.1).
When I tried to use printThis, when modal jQuery UI dialog is on screen - it print the entire page's content, not only selected.
Link to fiddle: http://jsfiddle.net/4kf6gqqb/4/

Note that the problem is only in Internet Explorer. It's work in FIrefox.

Insert jquery on iframe?

Is possible I put jquery code on this iframe? because this plugin make everything i need, but sometimes i need insert "${selector}.append on my html but if i make this don't print the append

Cannot see the text of select elements on print screen

Hi,

I'm using v 1.5 of your plugin.

I cannot see the selected text of select element, when i print.

http://jsfiddle.net/dJjMz/109/

Please help me in debugging this.

Hangs in FireFox

Jason:
The latest build with the new SetTimeout hangs in FireFox. Also, has this plugin been tested from an iPad or Android device to see if it works?

Printing tiled images in FireFox

Only parts of a tiled image map are printed in FireFox 17.0.1. Works in IE and Chrome. Here is the code:

<title>Map</title>

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" />

<style>
  #map {
    width:100%;
    height:100%;
  }
  .page-map #mapcontent, #map {
    width: 100%;
    height: 100%;
    padding: 0;
  }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="printThis.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script>
<script>
   dojo.require("esri.map");
   dojo.ready(init);

   function init() {
      map = new esri.Map("mainMap", {
         basemap: "streets",
         center: [-122.887, 47.013],
         zoom: 13
      });
   }

   function print() {
      $("#mainMap").printThis();
   }

</script>

<div data-role="page" id="mapPage" style="width:100%;height:100%;overflow:hidden;" data-theme="b">
  <button id="print1_button" onclick="javascript:print()">Print</button>

  <div data-role="content" style="padding:0;width:100%;height:100%;">
    <div id="mainMap"></div>
  </div>
</div>

Prints Blank Page in iOS 8

This plug-in only prints a blank page and footer information when printing from Safari in iOS 8.

https://jsfiddle.net/u1pvspqo/

Specify DOM element to which the print iframe is appended

First of all, thanks for this awesome plugin! It's just what I was looking for.

As I implemented the plugin on one of the pages on my site, I found that it worked perfectly right out of the box (hooray!). I then tried to employ it when clicking a button on a modal jQuery UI dialog, but found that when using IE 11 (not sure about earlier versions), the specified element was not printed. Rather, all visible content in the browser viewport was printed (sadness; sniff, sniff).

I think the issue is that since the print iframe is being appended to the "body" element, it doesn't get focus or something when ".print()" is finally executed (or something like that), since the jQuery dialog and its associated overlay div are laying on top of the main page:

(line 55) $frame.appendTo("body");

After banging my head against the wall for hours and cursing IE (not an unusual occurrence), I did a little experiment and added an "appendToEl" option (with a default of "body") to the others in your script:

appendToEl: "body"      // element to which the print iframe is appended

Then, I updated line 55 to read from the option:

$frame.appendTo(opt.appendToEl);

Finally, I updated the call in my document to specify an element that was within the jQuery UI dialog as the one to which the print iframe is appended:

$( "#selectorOfElementToPrint" ).printThis( {appendToEl: "#selectorOfElementInDialog"} );

Worked like a charm! Thought you might want to consider adding this as an option for anyone who finds the need for it, as I did.

Text need to come below the image

Hello,
I have attached the PDF wanted the text container to come below the image.
Having issue the text container is overlapping.
I am using print this version
printThis v1.4

• @desc Printing plug-in for jQuery
• @author Jason Day
  *
• Resources (based on) :

•          jPrintArea: http://plugins.jquery.com/project/jPrintArea
  

•          jqPrint: https://github.com/permanenttourist/jquery.jqprint
  

•          Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
  
• Licensed under the MIT licence:

•          http://www.opensource.org/licenses/mit-license.php
  
• (c) Jason Day 2014
  Ikea Damage Item Marking.pdf
  and playing around the css and Jquery

CSS:-
.viewport{
position:relative !important;
margin:0 auto;
width:100%;
text-align:center;
height:100%;
display:block;
clear:both;
}
.printNotes {
position: relative !important;
height: 100%;
margin:300px 30px auto;
width: 100%;
top:400px;
display:block;
clear:both;
}
JQuery:-
document.getElementById("print"+i).onclick=function(){
saveToDB();
$(".viewport, #imgNote").printThis();
$("#imgNote").addClass('printNotes');
$(".viewport").addClass('viewportimg');
$(".edit").parent().removeClass("addBgColor");
// $("#imgNote").removeClass('showcontent');
}

add the path
PrintThis.js
// defaults
$.fn.printThis.defaults = {
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
printContainer: true, // print outer container/$.selector
loadCSS: "css/images_upload/print.css", // load an additional css file
pageTitle: "Ikea Damage Item Marking", // add title to print page
removeInline: false, // remove all inline styles
printDelay: 500, // variable print delay
header: "", // prefix to html
formValues: true // preserve input/form values
};

Full element is not printing

Hi

i am using this plugin to print my datatable data but the problem is that if there is large data in tables then only one page print and the rest doesn't and the table appear to be broken at the bottom of that page.

Is there any way that i can print more than one page?

Thanks

IE(9) issues

Hi,
I'm using the plugin successfully with ff. But with IE I'm facing several problems.

1. Tables aren't printed correctly. The output is printed as one continuous string.
2. When the table is built and displayed via javascript/ajax (not on the original html page), printThis prints the whole page.

-> The IE workaround in the plugin is not touched since window.location.hostname == document.domain

When printing a div contents are empty on Internet Explorer

I'm using this combined with ASP.NET. Data are properly generated and visible. However upon initiating printThis() on div IE gets empty printout (Chrome works ok).

Printing error in firefox

Hello, congratulations for the plugin. I tested in Chrome and IE and it works fine, but not in firefox, is it possible?

function is erasing data from the form and doesnt print

hi guys, did u know any error calling the function and just erase the dat from the web page, and doesnt print anything?

im using the script for a while, but today something happens, some pages print correctly but a few pages doesnt print anything, im using the same version, the same way to call the function, how can i fix it?

<script src="js/printThis.js" type="text/javascript"></script>

//funcion para imprimir la pantalla
function imprimir_esto(id_tabla){
console.log(id_tabla)
$("#"+id_tabla).printThis({
debug: false,
importCSS: true,
printContainer: true,
loadCSS: "../css/style-print.css",
pageTitle: "",
removeInline: false
});
}

nevermind, for some reason, when i try to triger the function of printing, that was acting like a submit, because i have everything inside form tag.

Print page is blank in Chrome

Hi Jason,
I am using printThis ( with printDelay: 500 option) in my projects however there is one issue I am frequently facing.
My printing page data is pulled from the server by ajax which is invoice. Sometimes it shows blank page in Chrome if some data is not pulled fully. If I try second time it works fine since the images are cached in the browser.
Since the latest Chrome 46.0.2490.80m update it prints always blank with option printDelay: 500, even 2000.
Anything am I missing? Thank you.
Note: There is no any browser or js error.

Input value from a scripts not visible when printing

Input and textarea value visible in the browser, but not visible on the printout when printing on Firefox 25.0 browser. On IE10 just textarea is visible. Here my codes:
http://pastebin.com/2DbKKm4N
Thanks before.

IE issue with set document.domain

Discovered a major issue with IE when document.domain is being explicitly set on the page.

Fix will be posted tomorrow.

Minified version of the plugin?

Hello there,

First of all thank you to take the time and create this really useful plugin!

I have one question. Do you have any plans to include the minified version of the plugin at your repository? I mean something like: jquery.printThis.min.js with the minified version of the plugin.

Thank you in advance
Johnny

about:blank at top right

When printing a page using this plugin I always get "about:blank" at the top right of the page.

Didn't support print SVG under Firefox

I think it should add this code...

iframe.contentDocument.open();
iframe.contentDocument.close();

Forgive my poor English...

SCRIPT438: Object doesn't support property or method 'printThis'

I keep getting this error in Internet Explorer v7,8,9,&10
SCRIPT438: Object doesn't support property or method 'printThis'

jQuery('#printPage').click(function () {
    jQuery('#content').printThis();
});

Allow CSS Style tags

Hey there,
Would it be possible to get support for style tags? Normally I'd make a pull request, but I've already got a fork of jqprint, and it won't let me make another one. So here's the code change I'm requesting at line 44 of printThis.js:

// import page stylesheets
if (opt.importCSS) $("style, link[rel=stylesheet]").each(function () {
    var $clone = $(this).clone();
    if(this.tagName == 'LINK')
        $clone.attr('media', $clone.attr('media') || "all");
    $doc.find("head").append($clone);
});

Opera 12 prints whole page

Thank you for such a great plugin! I tested it's basic functionality (print given element) across Firefox, Chrome, IE11-10-9-8 and both "new" and "old" Operas. It works everywhere, but Opera 12. If I call .printThis() on a particular element, it prints whole page.
Jsfiddle: http://jsfiddle.net/dJjMz/2/

Why Opera 12? Because some people didn't like new engine and refuse to move to another browser. D'oh..

BTW, what does comments on that lines mean?

line 26: what (who) is S. Vance?
line 53: "IE works if document.domain is not explicitly set" - this place is executed if browser is not IE, maybe I don't understand something? :)

Images not loading

Hello,

I'm using Chrome.
Please check this example I did:

http://lucascotta.comlu.com/newspaper.html

Do you see the big text-image at the beginning of the right column? This comes from an external source and may take some time to load.

At the top, I included the print button with the following JS:

$("#finalPrint").printThis({
    importCSS: true
});

If you try it, you can see that the image is not loaded in the print window.
If I include a printDelay: 500 then the image loads fine.
But the problem is that in my real app, there are about 50 images, and I have to put a big delay such as 6000 so all images are loaded...

Am I doing something wrong? Would you suggest me to do something?

Thanks!!!

Shouldn't base take context path into concideration also, links broken.

My Web app path: localhost:8080/turbo.
When I print I get:

Error cannot find : http://localhost:8080/vendor/font-awesome/css/font-awesome.min.css

Its missing turbo path .

What about Opera (Presto) browser?

Is there a workaround to print in old Opera's?

Google maps not showing route line

When using a Bootstrap modal to display a map with a form (so the user can generate directions) the route line doesn't show (in Chrome, Safari, and Firefox -- all Mac OSX 10.9).

It displays in Chrome's Print Preview (printing from the browser menu) but not when using printThis.

My first assumption was it was a scope thing as I was creating a new map object when the modal was launched (thereby showing no route line when the modal is re-opened), but even after changing this the route line still appears in the modal but not when printing.

Any thoughts would be most welcome.

Here's the JS I'm using to trigger printThis:

$('#print_directions').on('click', function(ev) {
        ev.preventDefault();

        $('#printSection').printThis( {
                debug: false,
                importCSS:true,
                printContainer: false,
                pageTitle: "Getting here",
                printDelay: 333,
                header: null,
            });
    });
});

For example, here's Print Preview in Chrome as if I were printing normally;

And here's the Print Preview when using printThis.

$.browser deprecated in jQuery 1.9

See the jQuery 1.9 Upgrade Guide.

how can I hide the div layer?

Thanks for you making the great plug-in.This plug-in works fine for me. there is a problem about jQuery function Show() and Hide.

Here the thing is that I want to print a receipt.I just don't want to show the div layer of the receipt to user.so I hide the layer when the page loaded .

the script is here.

        function () {
            $("input#printBtn").click(function () {
                $("#myPrintArea").show();
                $("#ifPrint").val('1');
                $("div#myPrintArea").printThis({
                    debug: false,
                    pageTitle: ""
                });
               $("#myPrintArea").hide();
            });
        });```
but I run the script and the print page was blank.is it hidden directly?
Any help will be appreciated.

Page orientation, Porttrait or landscape

Hi, i think this is not a real issue but is there a way in the options to set up the page as landscape instead of portrait?
Thanks

Create NPM package

Seems like NPM is the recommended place to host plugins
http://blog.npmjs.org/post/111475741445/publishing-your-jquery-plugin-to-npm-the-quick
I had a lot of trouble finding this library, which is a shame because it was just what I needed.

Could I use this via nodejs?

Could I use this via nodejs?

Multiple CSS files on loadCSS

Would like to be able to reference multiple css files with loadCSS

Ignores Image Resolution

The area to print is simply a Div with a responsive image in it

Clicking the printThis button draws up a print dialog...
but the image seems to be ignoring it's PPI and reverting to 72ppi

If you simply save the image and print it, it correctly inherits the resolution

I just can't figure out why using this print method is ignoring resolution. TIA

Print Without margins our Titles/dates etc

Hello,

I am using the script to print a barcode, however I would like to print it right in the top left corner and without titles or page numbers. As the user is going to print it on a little sticker printer(Dymo printer) that only has room for the barcode. Here is a screenshot of what I get when printed via IE. Thank you for any help.

Dave

Chrome ignores pageTitle option

The <title> tag is being set in the iframe, but nevertheless, the Print headers still show the title of the parent page.