How can I change the size of the content within a window?

Question

I'm maintaining an existing website and I have a document that needs to be printed .

I have made some updates to correct some things on the document but the document is made to be printed from a different window. I was wondering both how to make sure the inner html fits inside a browser window and prints inside an 8 1/2 X 11 sheet of paper. Right now it bleeds off the paper and when printed stretches off of the paper worse.

The inner html is just an 870px wide html table yet even reducing the width to 800px does not change how it displays in the window or prints. The printable version is a popup done by injecting a javscript click event by changing a label's .text() property to

JS

function printClick() {  
    var w = window.open();  
    var html = $("#prntrForm").html(); 
    html.style.width = '92%';   
    $(w.document.body).html(html); 
}

$(function() {
    $("a#print").click(printClick); 
});

HTML

<a href="#"id="print">Printer Form</a>

Anyway I really just need to know how to size the width of the contents of the new window, making the new window have a print function would also be nice but isn't necessary. The similar questions I found seem to point to changing the css but I haven't added a css.

did you try any of these? https://plugins.jquery.com/tag/print/ — Cacho Santa, Sep 29 '15 at 19:26
is this something that I would have to install on the web server as a library for the module? I'm not really familiar with javascript or jquiery. I'm versed in C#, asp, html, SQL and some basic Java — Davidp04, Sep 29 '15 at 19:29
No, those are JQuery plugins... They will run on the browser.... They won't work for older browsers though — Cacho Santa, Sep 29 '15 at 19:31
No you just need to add JQuery Library before body. That is between your header tag. And use the plugin in your `.js` i.e. JavaScript File. — divy3993, Sep 29 '15 at 19:31
Have you looking here? http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages Which really in the end...leads to this.... http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ — , Sep 29 '15 at 19:32

score 1 · Accepted Answer · answered Sep 29 '15 at 19:37

To print the window (bring up the print dialog): w.print()
To size the window: var w = window.open('', '', 'width=300,height=400');

Updated code

function printClick() {  
    var w = window.open('', 'printform', 'width=300,height=400');  
    var html = $("#prntrForm").html(); 
    $(w.document.body).html(html); 
    w.print();
}

How can I change the size of the content within a window?

1 Answers1