• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Trying to print just one page

Daisy Belle

New Coder
I've been trying for weeks just to add a print function to my third party custom Blogger site. Since I can't code and I'm getting no help from the developer of the the custom theme, I'm using PrintFriendly button. I have it inserted in the correct place but it doesn't print just one page, it prints multiple pages. I need to know what coding I need to add so that it just prints a single recipe.

HTML:
<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion='2';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//cdn.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/print-button.png" alt="Print Friendly and PDF"/></a>

Here is my website - the button is just on the latest entry for Pineapple Cough Syrup - I don't know how to insert it into the template, which would be preferable, because then it would automatically put the print button on each page. But maybe that isn't possible. I only inserted it into the individual post because that's the only thing I know to do.

jancooks.com

Thanks for any help you can give me, I'm beyond frustrated trying to what I thought would be such a simple thing.
 

cbreemer

King Coder
Nice looking website !
Sorry to say I don't see the problem though. I opened the Pineapple Cough Syrup, clicked the Print button, clicked Print in the PrintFriendly dialog, and it prints out the recipe just fine. Just this recipe, and it does not print multiple pages. What browser are you using ?
 

Daisy Belle

New Coder
I'm using Safari and Chrome on a Mac. I cleaned my cache, it still tries to print an entire list of recipes. I tried on my iPhone, same thing. I tried on my husbands Mac, the long list of recipes show up when I clicked on the button. Then I went to a PC, same thing, when you click the print button and scroll down there are all my pages with recipes, not just the single page. I hadn't accessed that site on the PC, so it wasn't holding cookies. This makes no sense. I'm not smart enough to write my own code. I just don't understand. I attached a screen shot of what it's trying to send to the printer.
 

Attachments

  • Screenshot 2023-01-21 at 7.29.18 AM.jpg
    Screenshot 2023-01-21 at 7.29.18 AM.jpg
    266.1 KB · Views: 2

cbreemer

King Coder
Oh right, now I see the problem. For some reason I had gone to the "Popular posts" and clicked the recipe there, which bring up just the detail page and then printing works fine of course. Sorry about that.
Indeed, the print button will print the whole page. I get that, it's just how PrintFriendly works. It has no way of knowing what exactly you wanted to print. What I find strange is that it prints all the images twice. It's probably taking the ones from the right part of the screen too, although it's strange that they line up below each other. You might well have hit upon a bug in PrintFriendly here.
I'll have a look at the PrintFriendly documentation, as it's an interesting gadget which I may want to use some day, and see if there's an option to print a designated area only. If not, we need to look for a different solution.
 

Daisy Belle

New Coder
If you could figure something out, it would be great. And even though I choose just the print button, I get this header at the top (see attached screenshot). I don't want to see the PDF, email etc. Other people use PrintFriendly and don't have that header on their page, you just click and print. But maybe it's not possible to get rid of that. And when I set up coding with PrintFriendly, I chose left align, it ignores that and centers it, no big deal but I don't understand why it doesn't generate the code properly. A lot of people use PrintFriendly. I don't get why it doesn't function correctly. Maybe I have to pay the $4 a month for the pro version to get those options.

Ideally, I would just forget PrintFriendly and code it myself. Oh, I hate that I struggle with trying to code.

Thanks for helping me, it's much appreciated.
 

Attachments

  • Screenshot 2023-01-21 at 10.33.37 AM.jpg
    Screenshot 2023-01-21 at 10.33.37 AM.jpg
    186.9 KB · Views: 1

Daisy Belle

New Coder
Cool website. Can you share the code please?)
Thanks, it's driving me crazy trying to figure out how to not print multiple pages

HTML:
<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion='2';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//cdn.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/print-button.png" alt="Print Friendly and PDF"/></a>
 

cbreemer

King Coder
Update: Looking at PrintFriendly, I found no option to print just a specific part of the page. I gather you are not really interested in the PrintFriendly dialog with all the bells and whistles, you just want the recipe to print, right ? I think that should be just as simple to implement as what you have now, i.e. insert a piece of <script> in the page source, and a Print button in each recipe section. I'm currently working on that, will keep you posted.
 

cbreemer

King Coder
I have the basics of a solution. It does not look very nice yet, but it does the job basically. Perhaps you can try it out and see if it conceptually works for you ? If so I can work on the visual aspects.
Here are the two pieces of code you need :

JavaScript:
    <script>
<script>
    function printdiv ()
    {
        var CLASS="hentry";
        var el = event.srcElement;
        while ((el = el.parentElement) && !el.classList.contains(CLASS));
        var html = el.innerHTML;
        var w = window.open('', 'PRINT', 'popup,height=400,width=600');
        w.document.write('<html><body >');
        w.document.write(el.innerHTML);
        w.document.write('</body></html>');
        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10*/
        w.print();
        w.close();
        el.innerHTML = html;
    }
</script>
    </script>

HTML:
<button onclick="printdiv()">Print</button>

For now, you can insert both pieces, in this order, in the same place where you inserted that piece of PrintFriendly code you posted (overwriting that code).
Then for each additional print button, insert only the HTML code in the corresponding location inside the recipe.
 
Top