jQuery Print Preview

Question

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?

Answer 1

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.

Answer 2

There are two options. One is to add a custom service with a print icon and just use that instead of the print API.

http://support.addthis.com/customer/portal/articles/381245-custom-services

there's also a printfriendly API built into addthis:

http://www.addthis.com/services/list