Support » Plugin: Print-O-Matic » Making IE Output Exactly Same HTML

  • Resolved maryjanesfarm


    Thank you TwinPictures for providing this plugin!
    It darn near did exactly what I was hoping out of the box.

    Would you consider any of several possibilities to resolve an issue I encountered?
    I styled the popup and the print output by relying on the presence of the element specified in “Default Target Attribute”. But since IE refuses to work like everyone else, as you undoubtedly enjoyed, only the children HTML of that element and not the element itself get output to the popup when using IE.

    Option A) I can work around it by modifying printomat.js thusly:

    //rot in hell, Internet Explorer
    if (!!navigator.userAgent.match(/Trident\/7\./)){
    	jQuery(w.document.body).append( function() {
    		var ieID = target.substr(1);
    		var ieOutput = jQuery( w.document.createElement( 'div' ) );
    		if ( target.substr(0,1) == '#' ){
    			ieOutput.attr('id', ieID);
    		} else{
    		return ieOutput.append( jQuery( target ).clone().html() );

    I’m sure there’s plenty of ways to make my code more streamlined and perhaps more dynamic (e.g. to actually match the container(s) of the code being targeted by not hard-coding a div).

    Option B) Limit the cleanup that happens to the HTML entered into the “Print Page Top/Bottom HTML” textareas. I’m assuming it’s WordPress doing that, but I haven’t looked into that entirely.
    If it is possible, it would be a more immediate workaround to the IE style problem, to enter exactly the HTML I wanted for top/bottom. But unfinished tags get closed or removed. e.g. I could do the following: top = “<div id=’myPrintDiv’>”; bottom = “</div>”; and rely on those to style my print output, but the top div tag gets closed, and the bottom closing tag gets removed in the final popup.

    Option C) Perhaps something else I’m missing or don’t realize?

    It may be possible I could achieve all the style I desired by targeting the body element alone, w/o an intervening element, but I (superstitiously) don’t like relying on that, given past experience. And I’m also trying to avoid making the content writers/editors edit HTML or do other extra work in order to insert the necessary HTML into the targeted content. (Right now, I have inserted a custom style in tinyMCE, and they only need to select the targeted content, apply the style from the dropdown, and add the Print-o-Matic shortcode afterwards.)

    Anyway, thank you again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Also, along similar lines — now that I’m replacing my modifications after updating Print-o-matic (and having forgotten initially that I had modified it) — I’ve added the following into the printomat.js file @ line 33 (after var w =…):

    w.document.write("<!DOCTYPE html><html><head></head><body></body></html>");

    If I remember correctly, this was necessary as well in getting Internet Explorer to work as desired. (It was certainly only IE throwing a fit just now w/o my 2 modifications in there.)

    Plugin Author Baden


    thank you! We will test this and add it to the next release.

    Plugin Author Baden


    version 1.5.5b includes the changes you suggested. would you mind testing it in IE to see if it works for you as well? again, thank you.


    Yep. Looks surprisingly exactly the same… 🙂


    Plugin Author Baden


    Great! Issue marked as resolved. If you are happy and you know it, clap your hands!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making IE Output Exactly Same HTML’ is closed to new replies.