Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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:</p> <p><strong>Original AddThis Code:</strong> </p> <pre><code>&lt;!-- AddThis Peekaboo Toolbox : BEGIN --&gt; &lt;div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style"&gt; &lt;a class="addthis_button_more"&gt;Share&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="addthis_button_facebook"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="addthis_button_twitter"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="addthis_button_google_plusone_share"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="addthis_button_email"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="addthis_button_print"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- AddThis Peekaboo Toolbox : END --&gt; &lt;script type="text/javascript" src="https://s7.addthis.com/js/300/ addthis_widget.js"&gt;&lt;/script&gt; </code></pre> <p><strong>AddThis Code as it appears on the page:</strong></p> <pre><code>&lt;div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style"&gt; &lt;!-- Omited code not relevant to print function. --&gt; &lt;ul style="display: none;"&gt; &lt;!-- Changes to Display Block on Hover --&gt; &lt;!-- Omited code not relevant to print function. --&gt; &lt;li&gt; &lt;a class="addthis_button_print at300b" title="Print" href="#"&gt; &lt;span class=" at300bs at15nc at15t_print"&gt;&lt;/span&gt; Print &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>Edited Code to Change Print Function and Call Print Preview Plugin:</strong></p> <pre><code>&lt;div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style"&gt; &lt;!-- Omited code not relevant to print function. --&gt; &lt;ul style="display: none;"&gt; &lt;!-- Changes to Display Block on Hover --&gt; &lt;!-- Omited code not relevant to print function. --&gt; &lt;li&gt; &lt;a class="print-preview at-print"&gt; &lt;span class="at-print-span"&gt;&lt;/span&gt; Print &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS to Show Print Correctly:</strong></p> <pre><code>.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; } </code></pre> <p>I am not sure all of the CSS is needed but it does work. </p> <p><em><strong>IMPORTANT NOTE:</em></strong> </p> <p>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. </p> <p>Here is what must be done around line 44 you will see the following code: </p> <pre><code>// The frame lives for (var i=0; i &lt; window.frames.length; i++) { if (window.frames[i].name == "print-frame") { var print_frame_ref = window.frames[i].document; break; } } </code></pre> <p>Replace the above code with this: </p> <pre><code>print_frame_ref = print_frame[0].contentWindow.document; </code></pre> <p>issue solved. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload