Javascript Window.Open CSS

print one div

Well, there's good news and mediocre news.

The good news is that this page http://home.comcast.net/~judysgames/directory.htm shows code I wrote for this very purpose in action. It works in Firefox/Chrome/Safari(pc)/Opera and IE8/7/6.

The mediocre news is that I haven't finished making a context-free version that can be posted here as a code snippet.

The pieces that you need [all found in that page] are:
1. the call

<form> <button onclick="printNodeById('players')">Pop<br /> Print</button> </form>

2. the 'window' function

function printNodeById(sId) { var oPrt = document.getElementById(sId); if (window.opera && oPrt.offsetHeight > 800) { // opera screws up on 'very tall' windows _oPrp = window.open('', "printpreview", "location=no,height=" + (32 + 800) + ", width=" + (32 + oPrt.offsetWidth)); } else { _oPrp = window.open('', "printpreview", "location=no,height=" + (32 + oPrt.offsetHeight) + ", width=" + (32 + oPrt.offsetWidth)); } if (!document.importNode) { _oPrp.document.body.style.cursor = "wait"; // import CSS /* process STYLE elements approach */ var oPrH = _oPrp.document.getElementsByTagName("head")[0]; var cStyls = document.getElementsByTagName('style') // if cStyls.length > limit there will be a problem when StyleSheet is created for (var j = cStyls.length, i = 0; i < j; ++i) { oPrH.appendChild(_importNode(cStyls[i], true)); } /* process existing StyleSheets approach this code absolutely works (in IE8, at least) but since I thought it would be necessary to process 'excess' STYLE elements [>31 or >26 or whatever] it seemed to make more sense to do it all this way; now, however, it begins to look as though 'over the limit' STYLE elements may not be possible var oPrH = _oPrp.document.getElementsByTagName("head")[0]; for (var j=document.styleSheets.length,i=0;i<j;i++) { // var oStyl = _oPrp.document.createStyleSheet(); // number limited [?31 or ?26] so why bother var oStyl = _oPrp.document.createElement('STYLE'); // needed after limit anyway oPrH.appendChild(oStyl); // appending oStyl to 'head' here makes // oStyl.styleSheet available immediately with(document.styleSheets[i]) { oStyl.href = href; oStyl.media = media; oStyl.title = title; oStyl.disabled = disabled; oStyl.type = type; // [evidently read-only in StyleSheet] // // ?? what about link, rel for (var k=rules.length,ii=0;ii<k;ii++) { // I gave up on this approach (in favor of the STYLE-element approach, above) becuase IE6 locks up // ('invalid pointer' error) when attempting to copy a [probably 'empty'] rule based on CSS like // tr.idx {page-break-after: avoid} // [which IE6 evidently thinks is not 'legal'] if (!rules[ii].selectorText) oStyl.styleSheet.addRule("*",rules[ii].style.cssText); else oStyl.styleSheet.addRule(rules[ii].selectorText,rules[ii].style.cssText); } // for k } // with }; // for j // appendChild() NOT here - either already done above [STYLE] or not needed at all [createStyleSheet] */ _oPrp.document.body.appendChild(_importNode(oPrt, true)); _oPrp.document.body.style.cursor = "default"; } else { _oPrp.document.body.appendChild(_oPrp.document.importNode(oPrt, true)); // import CSS /* process STYLE elements approach */ var oPrH = _oPrp.document.getElementsByTagName("head")[0] var cStyls = document.getElementsByTagName('style') for (var j = cStyls.length, i = 0; i < j; ++i) { oPrH.appendChild(_oPrp.document.importNode(cStyls[i], true)); } if (window.opera) { // apparently opera doesn't act on imported classes automatically var cEls = _oPrp.document.getElementsByTagName('*'); for (var j = cEls.length, i = 0; i < j; i++) cEls[i].setAttribute('class', cEls[i].getAttribute('class')); } // copy item not imported by at least one browser var cTAs = document.getElementsByTagName('textarea'); for (var j = cTAs.length, i = 0; i < j; ++i) { _oPrp.document.getElementById(cTAs[i].getAttribute('id')).value = cTAs[i].value; } // copy item not imported by at least one browser var cSels = document.getElementsByTagName('select'); for (var j = cSels.length, i = 0; i < j; ++i) { _oPrp.document.getElementById(cSels[i].getAttribute('id')).selectedIndex = cSels[i].selectedIndex; } // Safari(pc) radio: actual 'checked' is lost depending // on position relative to default 'checked' in group var cInps = document.getElementsByTagName('input'); for (var j = cInps.length, i = 0; i < j; ++i) { if (cInps[i].type == 'radio') _oPrp.document.getElementById(cInps[i].getAttribute('id')).checked = cInps[i].checked; } } _oPrp.focus(); _oPrp.print(); _oPrp.close(); }

3. my _importNode() [which fills in for the importNode() method missing from IE]

// _importNode() needed for IE if (!document.importNode) { function _importNode(oNode, bImportChildren) { var oNew; with(oNode) { switch (nodeType) { // HTML // TEXT_NODE = 3; // ELEMENT_NODE = 1; // ATTRIBUTE_NODE = 2; [not accessed as a node] // COMMENT_NODE = 8; [ignored; not printable] default: alert('nodeType ' + nodeType + ' not handled'); break; case 3: oNew = _oPrp.document.createTextNode(nodeValue); break; case 1: oNew = _oPrp.document.createElement(nodeName); if (nodeName != "TEXTAREA") { if (nodeName == 'INPUT') { oNew.type = type; if (type == 'radio' || type == 'checkbox') { oNew.setAttribute('defaultChecked', checked) } // ?? IE8 only } if (nodeName == 'STYLE') { // in this approach oNew hasn't been // appended to 'head' at this stage // so oNew.styleSheet isn't available var oStyl = _oPrp.document.createStyleSheet(); // limit [?31 or ?26] var rls = innerHTML.match(/.+{.+}/g); for (var j = rls.length, i = 0; i < j; i++) { var k = rls[i].indexOf('{'); oStyl.addRule(rls[i].substring(0, k), rls[i].substring(k)) // ?? 4095 limit [counting , splits] } } for (var j = attributes.length, i = 0; i < j; i++) { if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') { // _classIE is set globally to 'class' [IE 8] or 'className' [lt IE 8] if (attributes[i].name == 'class') oNew.setAttribute(_classIE, attributes[i].value); else oNew.setAttribute(attributes[i].name, attributes[i].value); } } } // !TEXTAREA if (style && style.cssText) oNew.style.cssText = style.cssText; if (bImportChildren && hasChildNodes()) { for (var oChild = firstChild; oChild; oChild = oChild.nextSibling) { oNew.appendChild(_importNode(oChild, true)); } } } // switch } // with return oNew; } // function } // (!document.importNode

4. a couple of essential bits of overheard

<script language="JavaScript" type="text/javascript"> //<![CDATA[ _classIE='class'; // default to IE8 //]]> </script> <!--[if lt IE 8]> <script language="JavaScript" type="text/javascript"> //<![CDATA[ _classIE='className'; //]]> </script> <![endif]-->

Put #4, #3, and #2 (in that order) as <script> in the HEAD of your page.
Put #1 in the BODY [changing the parameter in the onclick= function call to use the id of your desired node].

You should be good to go on the first click.