Question

110

jQuery Print Preview

rated 0 times [ 113] [ 3] / answers: 1 / hits: 17100 / 12 Years ago, sat, july 7, 2012, 12:00:00

I am attempting to add the jQuery Print Preview Plugin into my website but I use AddThis' Print Option. I am not sure if there is a way for me to add the print preview plugin using AddThis. Is there a way?

Here is my code:

JS:

var $j = jQuery.noConflict();

   $j(document).ready(function() {

    $j('a.print-preview').printPreview();

});

AddThis Code:

<!-- AddThis Peekaboo Toolbox : BEGIN -->

<div class=addthis_toolbox addthis_peekaboo_style 

 addthis_default_style addthis_label_style addthis_32x32_style>

<a class=addthis_button_more>Share</a>

<ul>

<li><a class=addthis_button_facebook></a></li>

<li><a class=addthis_button_twitter></a></li>

<li><a class=addthis_button_google_plusone_share></a></li>

<li><a class=addthis_button_email></a></li>

<li><a class=addthis_button_print print-preview></a></li>

</ul>

</div>

<!-- AddThis Peekaboo Toolbox : END -->

<script type=text/javascript src=https://s7.addthis.com/js/

   300/addthis_widget.js></script>

When I click print it pops up the standard print dialog box in Firefox (or whatever browser I am using.)

I have a feeling that the AddThis JS is using something like JavaScript:window.print(); to trigger the print dialog thus bypassing the jQuery Print Preview Plugin. Is there an easy way to change the AddThis behavior to trigger the print preview?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

francokeganr

Add To Favorites

Follow

Total Points: 438

Total Questions: 102

Total Answers: 124

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

answered 12 Years ago lara · Accepted Answer

I was able to change the behavior of the AddThis print button by removing the classes and adding my own classes. Here is the code:

Original AddThis Code:

<!-- AddThis Peekaboo Toolbox : BEGIN -->

<div class=addthis_toolbox addthis_peekaboo_style 

  addthis_default_style addthis_label_style addthis_32x32_style>

<a class=addthis_button_more>Share</a>

<ul>

<li><a class=addthis_button_facebook></a></li>

<li><a class=addthis_button_twitter></a></li>

<li><a class=addthis_button_google_plusone_share></a></li>

<li><a class=addthis_button_email></a></li>

<li><a class=addthis_button_print></a></li>

</ul>

</div>

<!-- AddThis Peekaboo Toolbox : END -->

<script type=text/javascript src=https://s7.addthis.com/js/300/

  addthis_widget.js></script>

AddThis Code as it appears on the page:

<div class=addthis_toolbox addthis_peekaboo_style 

   addthis_default_style addthis_label_style addthis_32x32_style>

<!-- Omited code not relevant to print function. --> 

<ul style=display: none;> <!-- Changes to Display Block on Hover --> 

<!-- Omited code not relevant to print function. --> 

 <li>

  <a class=addthis_button_print at300b title=Print href=#>

  <span class= at300bs at15nc at15t_print></span>

      Print

   </a>

 </li>

</ul>

Edited Code to Change Print Function and Call Print Preview Plugin:

<div class=addthis_toolbox addthis_peekaboo_style 

   addthis_default_style addthis_label_style addthis_32x32_style>

<!-- Omited code not relevant to print function. --> 

<ul style=display: none;> <!-- Changes to Display Block on Hover --> 

<!-- Omited code not relevant to print function. --> 

 <li>

  <a class=print-preview at-print>

   <span class=at-print-span></span>

       Print

   </a>

 </li>

</ul>

CSS to Show Print Correctly:

.at-print {

  padding: 0 2px;

  float: left;

  padding: 10px 20px !important;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

}





.at-print-span {

  background-position: 0 -576px !important;

  background: url(//s7.addthis.com/static/r07/widget006_32x32_top.png) 

              no-repeat scroll left center transparent;

  display: block;

  height: 32px !important;

  line-height: 32px !important;

  overflow: hidden;

  width: 32px !important;

 float: left;

}

I am not sure all of the CSS is needed but it does work.

IMPORTANT NOTE:

This is how you will get the Print Button functionality changed so I can call the jQuery Print Preview Function. However, you will throw an error when using the AddThis script and the Print Preview Plugin together. The Print Preview must be modified.

Here is what must be done around line 44 you will see the following code:

// The frame lives

        for (var i=0; i < window.frames.length; i++) {

            if (window.frames[i].name == print-frame) {

                var print_frame_ref = window.frames[i].document;

                break;

            }

        }

Replace the above code with this:

print_frame_ref = print_frame[0].contentWindow.document;

issue solved.