advice : how to print only the jspanel screen

[AviHafner]

hi Stefan Do you have advice on how I put in toolbarHeader The print Button option to print only the jspanel screen

[Flyer53]

Hi Avi, I'm not sure what you really mean? Ok, you want a toolbarHeader with a print button/control. But what do you mean with "print" in this case? Do you mean printing out a hardcopy on paper with only the jsPanel content? And why do you need such a thing ...? Could you please explain this in more detail? Then I'd be glad to help ...

[AviHafner]

Thanks Stephen Correctly interpret my desire to print only the content a hardcopy on paper with only the jsPanel

yours Hafner Avi • (w): 972-4-829-5728 • hafner@technion.ac.ilmailto:hafner@tx.technion.ac.il

From: Stefan Sträßer [mailto:notifications@github.com] Sent: Monday, May 18, 2015 11:51 PM To: Flyer53/jsPanel Cc: AviHafner Subject: Re: [jsPanel] advice : how to print only the jspanel screen (#36)

Hi Avi, I'm not sure what you really mean? Ok, you want a toolbarHeader with a print button/control. But what do you mean with "print" in this case? Do you mean printing out a hardcopy on paper with only the jsPanel content? Could you please explain this in more detail? Then I'd be glad to help ...

— Reply to this email directly or view it on GitHubhttps://github.com/Flyer53/jsPanel/issues/36#issuecomment-103206942.

[Flyer53]

Ok Avi, Now here I have an example how you could add an extra icon (don't have a printer icon in my icon font yet, so used the eye) to the controls (not the toolbarHeader) with a callback function that removes all but the jsPanel from the document and calls the print menu from the browser:

$.jsPanel({
    id:       "testpanel",
    size:     { width: 900, height: 500 },
    position: "center",
    theme:    "info",
    iframe:   { src: "http://jspanel.de/" },
    callback: function (panel) {
        // add icon to controls
        $('.jsPanel-hdr-r', panel).append('<div class="jsPanel-btn-print jsPanel-btn-hide"><span class="jsglyph jsglyph-eye-slash"></span></div>');
        // callback for the new icon
        $('.jsPanel-btn-print', panel).click(function () {
            $("html, body").css("background-image", "none");
            $("*", "body").not(".jsPanel, .jsPanel *").remove();
            $(".jsPanel").css("box-shadow", "none");
            window.print();
        });
    }
});

This might be of help for you but consider that the resullt depends on the css applied to your document. Some frameworks like Bootstrap or Foundation for example add a lot of @media rules to the document resulting in a complete loss of background colors and images for most of the elements when printed. So there might be a lot of css tuning necessary on your side.

Depending on what you need that for it might also be worth looking at http://www.printwhatyoulike.com

Regards, Stefan

[AviHafner]

A big thank Stefan I'm going to investigate and implement the proposal

yours Hafner Avi • (w): 972-4-829-5728 • hafner@technion.ac.ilmailto:hafner@tx.technion.ac.il

From: Stefan Sträßer [mailto:notifications@github.com] Sent: Tuesday, May 19, 2015 1:50 PM To: Flyer53/jsPanel Cc: AviHafner Subject: Re: [jsPanel] advice : how to print only the jspanel screen (#36)

Ok Avi, Now here I have an example how you could add an extra icon (don't have a printer icon in my icon font yet, so used the eye) to the controls (not the toolbarHeader) with a callback function that removes all but the jsPanel from the document and calls the print menu from the browser:

$.jsPanel({

id:       "testpanel",

size:     { width: 900, height: 500 },

position: "center",

theme:    "info",

iframe:   { src: "http://jspanel.de/" },

callback: function (panel) {

    // add icon to controls

    $('.jsPanel-hdr-r', panel).append('<div class="jsPanel-btn-print jsPanel-btn-hide"><span class="jsglyph jsglyph-eye-slash"></span></div>');

    // callback for the new icon

    $('.jsPanel-btn-print', panel).click(function () {

        $("html, body").css("background-image", "none");

        $("*", "body").not(".jsPanel, .jsPanel *").remove();

        $(".jsPanel").css("box-shadow", "none");

        window.print();

    });

}

});

This might be of help for you but consider that the resullt depends on the css applied to your document. Some frameworks like Bootstrap or Foundation for example add a lot of @mediahttps://github.com/media rules to the document resulting in a complete loss of background colors and images for most of the elements when printed. So there might be a lot of css tuning necessary on your side.

Depending on what you need that for it might also be worth looking at http://www.printwhatyoulike.com

Regards, Stefan

— Reply to this email directly or view it on GitHubhttps://github.com/Flyer53/jsPanel/issues/36#issuecomment-103435406.