jQuery-Plugin jqPrint - toggle visibility of print-control

i'm using the jQuery Plugin jqPrint to print only a container control on the page(in my case a Table). This "print-container" should be invisible by default (display:none).

So i tried to toggle the visibility with the jQuery Functions show/hide or toggle. But the control will only be printed when it is visible by default.

This is the print-button, i tried following without success:

1.

<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').toggle().jqprint().toggle(); return false;" value="Print" title="Print" />  

2.

<input type="button" style="width:120px" onclick="javascript:var tblprint=$('#TblPrinterView');tblprint.show();tblprint.jqprint();tblprint.hide(); return false;" value="Print" title="Print" />

As i already men开发者_如何学运维tioned, the table will only be printed when its initially visible. Otherwise show() or toggle() will make it visible, the printer dialog is shown, but it won't be printed.

Thank you in advance.

UPDATE: The solution was - thanks to waxolunist - to define a media print css. On this way i event don't need to toggle visibility of the printable-control. It can be invisible(display:none) by default.

This is the jQuery function to print the control:

<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').jqprint(); return false;" value="Print" title="Print" />

and this is the stylesheet:

@media print 
{
    .TblPrinterView{display:block;}
}

Here is the Plugin:

// -----------------------------------------------------------------------
// Eros Fratini - eros@recoding.it
// jqprint 0.3
//
// - 19/06/2009 - some new implementations, added Opera support
// - 11/05/2009 - first sketch
//
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
// requires jQuery 1.3.x
//
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------

(function($) {
    var opt;

    $.fn.jqprint = function (options) {
        opt = $.extend({}, $.fn.jqprint.defaults, options);

        var $element = (this instanceof jQuery) ? this : $(this);

        if (opt.operaSupport && $.browser.opera) 
        { 
            var tab = window.open("","jqPrint-preview");
            tab.document.open();

            var doc = tab.document;
        }
        else 
        {
            var $iframe = $("<iframe  />");

            if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }

            $iframe.appendTo("body");
            var doc = $iframe[0].contentWindow.document;
        }

        if (opt.importCSS)
        {
            if ($("link[media=print]").length > 0) 
            {
                $("link[media=print]").each( function() {
                    doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
                });
            }
            else 
            {
                $("link").each( function() {
                    doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
                });
            }
        }

        if (opt.printContainer) { doc.write($element.outer()); }
        else { $element.each( function() { doc.write($(this).html()); }); }

        doc.close();

        (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
        setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
    }

    $.fn.jqprint.defaults = {
        debug: false,
        importCSS: true, 
        printContainer: true,
        operaSupport: true
    };

    // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
    jQuery.fn.outer = function() {
      return $($('<div></div>').html(this.clone())).html();
    } 
})(jQuery);

Did you already try to make your container only visible in printMode with CSS? I mean with css media=print visible and with media=screen invisible?

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

This means, the first statement is only executed on print, the last on print and screen. A list of media types is available http://www.w3.org/TR/CSS2/media.html.

That way you can control your css dependent on which device it is shown.