title: want to show print preview
body: <p>I want to show a print preview, so I chose to use <a href="https://github.com/etimbo/jquery-print-preview-plugin" rel="nofollow noreferrer">this plugin</a>.</p>
  
  <p>I have added it to my code:</p>
  
  <pre><code>&lt;%@ Page language="c#" AutoEventWireup="false" Inherits="System.Web.UI.Page" %&gt;
  &lt;%@ Register TagPrefix="CP" TagName="TitleBar" Src="WebUserControl.ascx" %&gt;
  
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt; 
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;MyPage&lt;/title&gt;
      &lt;link href="css/print-preview.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/print.css" type="text/css" media="print" /&gt;
      &lt;script type="text/javascript" src="jquery.tools.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.print-preview.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function () {
  
              /*
              * Initialise print preview plugin
              */
              // Add link for print preview and intialise
              $('#aside').prepend('&lt;a class="print-preview"&gt;Print this page&lt;/a&gt;');
              $('a.print-preview').printPreview();
  
              // Add keybinding (not recommended for production use)
              $(document).bind('keydown', function (e) {
                  var code = (e.keyCode ? e.keyCode : e.which);
                  if (code == 80 &amp;&amp; !$('#print-modal').length) {
                      $.printPreview.loadPrintPreview();
                      return false;
                  }
              });
          });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;CP:TitleBar Title="User Control Test" TextColor="green" Padding="10" runat="server" /&gt;
    &lt;div id="aside"&gt;&lt;/div&gt;
    &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In <code>UserControl</code> I did this:</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %&gt;
  &lt;script src="jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
     $(document).ready(function () {
  
      $("p").text("The DOM is now loaded and can be manipulated.");
  });
  &lt;/script&gt;
  &lt;p&gt;Not loaded yet.&lt;/p&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Problem is, when I add the script in <code>UserControl</code>, the <code>Print-Preview-Plugin</code> is not working.</p>
  
  <p>When I remove the script from the <code>UserControl</code> the <code>print-preview-plugin</code> works fine.</p>
  
  <p>My question is, why is the plugin not working when I add script to the UserControl? How should I call the Print Preview Plugin file code?</p>
  
  <pre><code>/*!
   * jQuery Print Previw Plugin v1.0.1
   *
   * Copyright 2011, Tim Connell
   * Licensed under the GPL Version 2 license
   * http://www.gnu.org/licenses/gpl-2.0.html
   *
   * Date: Wed Jan 25 00:00:00 2012 -000
   */
  
  (function($) { 
  
      // Initialization
      $.fn.printPreview = function() {
          this.each(function() {
              $(this).bind('click', function(e) {
                  e.preventDefault();
                  if (!$('#print-modal').length) {
                      $.printPreview.loadPrintPreview();
                  }
              });
          });
          return this;
      };
  
      // Private functions
      var mask, size, print_modal, print_controls;
      $.printPreview = {
          loadPrintPreview: function() {
              // Declare DOM objects
              print_modal = $('&lt;div id="print-modal"&gt;&lt;/div&gt;');
              print_controls = $('&lt;div id="print-modal-controls"&gt;' + 
                                      '&lt;a href="#" class="print" title="Print page"&gt;Print page&lt;/a&gt;' +
                                      '&lt;a href="#" class="close" title="Close print preview"&gt;Close&lt;/a&gt;').hide();
              var print_frame = $('&lt;iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" /&gt;');
  
              // Raise print preview window from the dead, zooooooombies
              print_modal
                  .hide()
                  .append(print_controls)
                  .append(print_frame)
                  .appendTo('body');
  
              // 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;
                  }
              }
              print_frame_ref.open();
              print_frame_ref.write('&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;' +
                  '&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;' + 
                  '&lt;head&gt;&lt;title&gt;' + document.title + '&lt;/title&gt;&lt;/head&gt;' +
                  '&lt;body&gt;&lt;/body&gt;' +
                  '&lt;/html&gt;');
              print_frame_ref.close();
  
              // Grab contents and apply stylesheet
              var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
                  $iframe_body = $('body &gt; *:not(#print-modal):not(script)').clone();
              $iframe_head.each(function() {
                  $(this).attr('media', 'all');
              });
              if (!$.browser.msie &amp;&amp; !($.browser.version &lt; 7) ) {
                  $('head', print_frame_ref).append($iframe_head);
                  $('body', print_frame_ref).append($iframe_body);
              }
              else {
                  $('body &gt; *:not(#print-modal):not(script)').clone().each(function() {
                      $('body', print_frame_ref).append(this.outerHTML);
                  });
                  $('head link[media*=print], head link[media=all]').each(function() {
                      $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
                  });
              }
  
              // Disable all links
              $('a', print_frame_ref).bind('click.printPreview', function(e) {
                  e.preventDefault();
              });
  
              // Introduce print styles
              $('head').append('&lt;style type="text/css"&gt;' +
                  '@media print {' +
                      '/* -- Print Preview --*/' +
                      '#print-modal-mask,' +
                      '#print-modal {' +
                          'display: none !important;' +
                      '}' +
                  '}' +
                  '&lt;/style&gt;'
              );
  
              // Load mask
              $.printPreview.loadMask();
  
              // Disable scrolling
              $('body').css({overflowY: 'hidden', height: '100%'});
              $('img', print_frame_ref).load(function() {
                  print_frame.height($('body', print_frame.contents())[0].scrollHeight);
              });
  
              // Position modal            
              starting_position = $(window).height() + $(window).scrollTop();
              var css = {
                      top:         starting_position,
                      height:      '100%',
                      overflowY:   'auto',
                      zIndex:      10000,
                      display:     'block'
                  }
              print_modal
                  .css(css)
                  .animate({ top: $(window).scrollTop()}, 400, 'linear', function() {
                      print_controls.fadeIn('slow').focus();
                  });
              print_frame.height($('body', print_frame.contents())[0].scrollHeight);
  
              // Bind closure
              $('a', print_controls).bind('click', function(e) {
                  e.preventDefault();
                  if ($(this).hasClass('print')) { window.print(); }
                  else { $.printPreview.distroyPrintPreview(); }
              });
          },
  
          distroyPrintPreview: function() {
              print_controls.fadeOut(100);
              print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){
                  print_modal.remove();
                  $('body').css({overflowY: 'auto', height: 'auto'});
              });
              mask.fadeOut('slow', function()  {
                  mask.remove();
              });             
  
              $(document).unbind("keydown.printPreview.mask");
              mask.unbind("click.printPreview.mask");
              $(window).unbind("resize.printPreview.mask");
          },
  
          /* -- Mask Functions --*/
          loadMask: function() {
              size = $.printPreview.sizeUpMask();
              mask = $('&lt;div id="print-modal-mask" /&gt;').appendTo($('body'));
              mask.css({              
                  position:           'absolute', 
                  top:                0, 
                  left:               0,
                  width:              size[0],
                  height:             size[1],
                  display:            'none',
                  opacity:            0,                          
                  zIndex:             9999,
                  backgroundColor:    '#000'
              });
  
              mask.css({display: 'block'}).fadeTo('400', 0.75);
  
              $(window).bind("resize..printPreview.mask", function() {
                  $.printPreview.updateMaskSize();
              });
  
              mask.bind("click.printPreview.mask", function(e)  {
                  $.printPreview.distroyPrintPreview();
              });
  
              $(document).bind("keydown.printPreview.mask", function(e) {
                  if (e.keyCode == 27) {  $.printPreview.distroyPrintPreview(); }
              });
          },
  
          sizeUpMask: function() {
              if ($.browser.msie) {
                  // if there are no scrollbars then use window.height
                  var d = $(document).height(), w = $(window).height();
                  return [
                      window.innerWidth ||                        // ie7+
                      document.documentElement.clientWidth ||     // ie6  
                      document.body.clientWidth,                  // ie6 quirks mode
                      d - w &lt; 20 ? w : d
                  ];
              } else { return [$(document).width(), $(document).height()]; }
          },
  
          updateMaskSize: function() {
              var size = $.printPreview.sizeUpMask();
              mask.css({width: size[0], height: size[1]});
          }
      }
  })(jQuery);
  </code></pre>