Hi Guys... me and my partner has a problem regarding printing a web page. We only wanted to print the body or one part of the page that we really need - a form to be exact. We were able to find codes with the help of Google but this codes does not just work. basically we wanted to take out the header, footer and side navigation bars of the page and just literally get the body. Today, we were able to arrive to this link: www3.gamhan.com/snips/prnbut/prnbut.html it worked just as we wanted having a preview of the supposed to be printed page - no header, no footer - (but not taking out the side navigation bar). When printing, all content of the page had been printed and the parts that were hid on the preview, is just hid in the preview screen. So guys, could you help us about our problem. Apologies for going round and round stating what our problem is, it's been 3 days without sleep and we are stuck on the problem. Thank You.
print the body or one part of the page that we really need - a form
Is this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function printbyid(sId)
{
var oPrn = document.getElementById(sId);
var oWin = window.open('', "quickprint");
oWin.document.writeln(oPrn.innerHTML);
oWin.document.close();
oWin.focus();
oWin.print();
oWin.close();
}
</script>
<title></title>
</head>
<body>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<div id='test'>
This is what will print
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>enough?
thanks :) a lot!
Hi fxm, thanks for the code it works perfectly but how could I include the values of the fields during printing? Is it possible or not ? :(
include the values of the fields during printing? Is it possible or not ? :(
For Firefox,Chrome,Opera,Safari(pc) this modification
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function printbyid(sId) {
if (!document.importNode) {
alert('No such luck')
} else {
var oPrn = document.getElementById(sId);
var oWin = window.open('', "quickprint");
oWin.document.close();
oWin.document.body.appendChild(oWin.document.importNode(oPrn, true));
oWin.focus();
oWin.print();
oWin.close();
}
}
</script>
<title></title>
</head>
<body>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<div id='test'>
This is what will print
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>may be adequate. A version that preserves all styles should be possible.
IE doesn't support the importNode() method and I don't yet have a reasonable workaround.
thanks again fxm, it worked for chrome! you're the best! but... firefox does not show the print preview :( we are thinking that this will be a problem for the part of the customer since that they are using mozilla firefox as their main browser... thank you so much!
firefox does not show the print preview
The other non-IE browsers I tested don't either.
In theory any browser with an ActiveX plugin [including Firefox] should be able to invoke the same PrintPreview dialog/control that IE uses (security considerations aside).
Apparently Firefox can also get the same effect using methods of nsIWebBrowserPrint; I have no experience with that.
Note: I don't know whether it is of any value in your situation, but I do my testing with CutePDF Writer (part of the free CutePDF package). That makes 'printing' from a web page fast and easy; if/when the PDF document created is later sent to a real printer, the print preview functions are available at that time.
print preview
I've made a quick fix.
The window opened is now a popup and - assuming that I have the code right - its size should match the size of the element to be printed reasonably well. Sort of a non-IE 'print preview' :)
The IE branch is now integrated but [because importNode() is lacking] it still doesn't include the content of some elements. I may look into that.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function printbyid(sId) {
var oPrn = document.getElementById(sId);
var oWin = window.open('', "quickprint",
"location=no,height="+(32+oPrn.offsetHeight)+", width="+(32+oPrn.offsetWidth));
if (!document.importNode) {
oWin.document.writeln(oPrn.innerHTML);
} else {
oWin.document.body.appendChild(oWin.document.importNode(oPrn, true));
}
oWin.document.close();
oWin.focus();
oWin.print();
oWin.close();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>Note: most non-IE browsers for security reasons won't honor the location=no parameter.
Hey fxm, thanks and once again you've been a great help for us and we really really thank you for that. We do have a new problem, we have a drop down boxes which include texts and again the question is, is it possible? :(
Note: Everything works well now, it's just the drop box that we couldn't get the text to appear during the print preview and in printing.
Hi fxm, I'm sorry for so much questions but this project is kinda urgent, I do have a follow-up question, can I add css codes to the print preview? thanks
can I add css codes to the print preview?
If by "print preview" you mean my little 'fake', then yes: style (both css and inline) can be added - but it isn't particularly easy [and the fact that you ask whether it can be done at all suggests that you may not be ready to tackle it that way].
The good news is that you may not have to. The existing inline style (and at least some of the relevant css) should carry forward automatically into the popup. The extent to which this is done properly no doubt varies by browser. I have done only one test: Replacing
First name:with
<span style="color:red"> First name:</span>worked perfectly in Chrome. Depending on what you are aiming for, you may find @media print {} and/or <style ... media="print"> [where supported] useful in styling printed output differently.
we have a drop down boxes which include texts
Please give me an example.
@media print { .dontprint { display:none; } }
@media screen { .dontshow { display:none; } }then anything you wish not to print, at the 'dontprint' class to
eg
<span> inline </span>
<div class='header'>menu stuff</div>
<!-- becomes -->
<div class='header dontprint'>menu stuff</div>I like dontprint, its a descriptive name
css @media types allow you to customize appearance for the output, so youcan ..
<div class='header dontprint'>menu stuff</div>
<div class='header dontshow'>alternate header for printed page Wow, cool</div>:)
in css you can
@media screen { /* loads of css to define appearance */ }
@media print { /* loads of different css to redefine appearance on papaer */ }On screen I have a logo that floats at the bottom corner of the screen and includes a goto top link,
on paper a logo that is fixed at the corner of the page and includes copyright and printed contactus
Please give me an example.
It appears that Firefox and Chrome don't import the selectedIndex property.
If your example is simple I can give you a quick fix; otherwise I should have a general fix shortly.
Everything works well now, it's just the drop box that we couldn't get the text to appear during the print preview and in printing.
OK, here is a nearly final version.
Two new features: it now handles listbox/select [which is what I assume you meant by "drop box"] and fully (I think!) supports IE [using my simulated importNode()].
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
// _importNode() needed for IE
if (!document.importNode) {
function _importNode(oNode, bImportChildren) {
var oNew;
with(oNode) {
// alert(nodeType)
switch (nodeType) {
// HTML NodeType
// TEXT_NODE = 3;
// ELEMENT_NODE = 1;
// ATTRIBUTE_NODE = 2; [not accessed as a node]
// COMMENT_NODE = 8; [ignored; not printable]
// XML [shouldn't be possible]
// CDATA_SECTION_NODE = 4;
// ENTITY_REFERENCE_NODE = 5;
// ENTITY_NODE = 6;
// PROCESSING_INSTRUCTION_NODE = 7;
// DOCUMENT_NODE = 9;
// DOCUMENT_TYPE_NODE = 10;
// DOCUMENT_FRAGMENT_NODE = 11;
// NOTATION_NODE = 12;
case 3:
oNew = oWin.document.createTextNode(oNode.nodeValue);
break;
case 1:
oNew = oWin.document.createElement(nodeName);
for (var i = 0; i < attributes.length; i++) {
if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
var attrName = attributes[i].name;
var attrValue = attributes[i].value;
if (attrName == "class") {
oNew.setAttribute("className", attrValue);
} else {
oNew.setAttribute(attrName, attrValue);
if (attrName + attrValue == 'typetext') oNew.value = value;
}
}
}
if (style != null && style.cssText != null) oNew.style.cssText = style.cssText;
}
if (bImportChildren && hasChildNodes()) {
for (var oChild = firstChild; oChild; oChild = oChild.nextSibling) {
oNew.appendChild(_importNode(oChild, true));
}
}
}
return oNew;
}
}
// end _importNode()
function printbyid(sId) {
var oPrn = document.getElementById(sId);
oWin = window.open('', "quickprint",
"location=no,height="+(32+oPrn.offsetHeight)+", width="+(32+oPrn.offsetWidth));
oWin.document.open();
oWin.document.write('<span id="fxm"><\/span>');
if (!document.importNode) {
var oTmp = _importNode(oPrn, true);
oWin.document.close();
var oPtr = oWin.document.getElementById('fxm')
oPtr.appendChild(oTmp)
} else {
oWin.document.body.appendChild(oWin.document.importNode(oPrn, true));
// compensate for value not imported by at least some browsers
var cSels = document.getElementsByTagName('select')
for (var i = 0; i < cSels.length; ++i) {
var iSel = cSels[i].getAttribute('id')
var nSel = oWin.document.getElementById(iSel)
var oSel = document.getElementById(iSel)
nSel.selectedIndex = oSel.selectedIndex
}
}
oWin.focus();
oWin.print();
oWin.close();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:red">First name:</span> <input type=
"text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form><select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>OK, here is a nearly final version.
I reckon that makes this nearly, nearly final :)
Added support for 'TEXTAREA' [needs more testing] and may have resolved all related IE incompatibilities.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
// _importNode() needed for IE
if (!document.importNode) {
function _importNode(oNode, bImportChildren) {
var oNew;
with(oNode) {
// alert(nodeName)
switch (nodeType) {
// HTML NodeType
// TEXT_NODE = 3;
// ELEMENT_NODE = 1;
// ATTRIBUTE_NODE = 2; [not accessed as a node]
// COMMENT_NODE = 8; [ignored; not printable]
// XML [shouldn't be possible]
// CDATA_SECTION_NODE = 4;
// ENTITY_REFERENCE_NODE = 5;
// ENTITY_NODE = 6;
// PROCESSING_INSTRUCTION_NODE = 7;
// DOCUMENT_NODE = 9;
// DOCUMENT_TYPE_NODE = 10;
// DOCUMENT_FRAGMENT_NODE = 11;
// NOTATION_NODE = 12;
case 3:
oNew = oWin.document.createTextNode(oNode.nodeValue);
break;
case 1:
oNew = oWin.document.createElement(nodeName);
for (var i = 0; i < attributes.length; i++) {
if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
var attrName = attributes[i].name;
var attrValue = attributes[i].value;
if (attrName == "class") {
oNew.setAttribute("className", attrValue);
} else {
if (nodeName != "TEXTAREA") {
oNew.setAttribute(attrName, attrValue);
if (attrName + attrValue == 'typetext') oNew.value = value;
}
}
}
}
if (style != null && style.cssText != null) oNew.style.cssText = style.cssText;
}
if (bImportChildren && hasChildNodes()) {
for (var oChild = firstChild; oChild; oChild = oChild.nextSibling) {
oNew.appendChild(_importNode(oChild, true));
}
}
}
return oNew;
}
}
// end _importNode()
function printbyid(sId) {
var oPrn = document.getElementById(sId);
oWin = window.open('', "quickprint",
"location=no,height="+(32+oPrn.offsetHeight)+", width="+(32+oPrn.offsetWidth));
if (!document.importNode) {
oWin.document.open();
oWin.document.write('<span id="fxm"></span>');
var oTmp = _importNode(oPrn, true);
oWin.document.close();
var oPtr = oWin.document.getElementById('fxm')
oPtr.appendChild(oTmp)
} else {
oWin.document.body.appendChild(oWin.document.importNode(oPrn, true));
// compensate for value not imported by at least some browsers
var cSels = document.getElementsByTagName('select')
for (var i = 0; i < cSels.length; ++i) {
var iSel = cSels[i].getAttribute('id')
var nSel = oWin.document.getElementById(iSel)
var oSel = document.getElementById(iSel)
nSel.selectedIndex = oSel.selectedIndex
}
var cTAs = document.getElementsByTagName('textarea')
for (var i = 0; i < cTAs.length; ++i) {
var iTA = cTAs[i].getAttribute('id')
var nTA = oWin.document.getElementById(iTA)
var oTA = document.getElementById(iTA)
nTA.value = oTA.value
}
}
oWin.focus();
oWin.print();
oWin.close();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:red">First name:</span> <input type=
"text" name="firstname"><br>
Last name: <textarea id="jlb" rows="2" cols="20" type="text" name="lastname"></textarea>
</form><select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html><tr id = "trGrpHeader2">
<td class="contact" width="42%"><span onClick="javascript:Toggle_trGrpHeader2();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader2_Img"/><strong> Classic</strong></span></td>
<td colspan="2" class="contact"><strong>AAAAAAA</strong></td>
</tr>
<tr id = "row2" style = "display:none">
<td height="40" class="contact">
<select name="select" id="select">
<option selected="selected">-Select one-</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
</td>
<td width="31%" class="contact">Start:
<input name="search_query7" type="text" class="textInput" size="10" id = "text1"/>
<div style = "display: none"><img id = "calImg" src="calendar-blue.gif" width="16" height="15"></div>
<td width="27%">
End:
<input name="search_query10" type="text" class="textInput" size="10" id = "text2"/> <div style = "display: none"><img id = "calImg1" src="calendar-blue.gif" width="16" height="15"></div><span class="servBodL">in our code, we included a javascript that allows us to toggle (hide/unhide)the rows of the table. As for the drop down. It's from line 6-15.
We'll try the code that you gave us. THANKS! :D
The <select> should work exactly as you have it.
I would be very interested to know whether the table formats properly. If not I may be able to deal with it.
The <select> should work exactly as you have it.
I would be very interested to know whether the table formats properly. If not I may be able to deal with it.
This is for our table with the toggle :)
<table border="1" cellspacing="0" class="contacts" summary="Contacts template">
<tr>
<td class="contactDept" colspan="3">ZZZZ</td>
</tr>
<tr id = "trGrpHeader2">
<td class="contact" width="42%"><span onClick="javascript:Toggle_trGrpHeader2();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader2_Img"/><strong> Classic</strong></span></td>
<td colspan="2" class="contact"><strong>ZZZZZ</strong></td>
</tr>
<tr id = "row2" style = "display:none">
<td height="40" class="contact">
<select name="select" id="select">
<option selected="selected">-Select one-</option>
<option>Z</option>
<option>A</option>
<option>Z</option>
<option>A</option>
<option>z</option>
<option>A</option>
</select>
</td>
<td width="31%" class="contact">Start:
<input name="search_query7" type="text" class="textInput" size="10" id = "text1"/>
<div style = "display: none"><img id = "calImg" src="calendar-blue.gif" width="16" height="15"></div>
<td width="27%">
End:
<input name="search_query10" type="text" class="textInput" size="10" id = "text2"/> <div style = "display: none"><img id = "calImg1" src="calendar-blue.gif" width="16" height="15"></div><span class="servBodL">
<!-- End Calender Script -->
<tr id ="trGrpHeader3">
<td height="26" class="contact"><span onClick="javascript:Toggle_trGrpHeader3();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader3_Img"/> <strong>A</strong></td>
<td class="contact"> </td>
<td class="contact"> </td>
</tr>
<tr id = "trow1" style="display:none">
<td height="26" class="contact"><select name="select2" id="select2">
<option selected="selected">-Select one-</option>
<option>A</option>
<option>Q</option>
<option>A</option>
<option>Q</option>
</select></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text3" /> <div style = "display: none"><img id = "calImg2" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text4"/> <div style = "display: none"><img id = "calImg3" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
<tr id = "trGrpHeader4">
<td height="26" class="contact"><span class="contact"><span onclick="javascript:Toggle_trGrpHeader4();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader4_Img"/> <strong>Q</strong></span></td>
<td class="contact"> </td>
<td class="contact"> </td>
</tr>
<tr id = "Row1" style="display:none">
<td height="26" class="contact"><select name="select3" id="select3">
<option selected="selected">-Select one-</option>
<option>QQQ</option>
<option>QQQ</option>
</select></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text5" /> <div style = "display: none"><img id = "calImg4" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text6" /> <div style = "display: none"><img id = "calImg5" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
<tr id = "Row2" style="display:none">
<td height="26" class="contact">ZA
<select name="select4" id="select4">
<option selected="selected">-Select one-</option>
<option>AS</option>
<option>AS</option>
<option>AS</option>
<option>AS</option>
</select></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text7"/> <div style = "display: none"><img id = "calImg6" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text8"/> <div style = "display: none"><img id = "calImg7" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
<tr id = "Row3" style="display:none">
<td height="26" class="contact">AS
<select name="select5" id="select5">
<option selected="selected">-Select one-</option>
<option>X</option>
<option>X</option>
<option>X</option>
<option>X</option>
</select></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text9"/> <div style = "display: none"><img id = "calImg8" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End:<span class="servBodL">
<input name="search_query21" type="text" class="textInput" size="10" id = "text10"/> <div style = "display: none"><img id = "calImg9" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
<tr id = "trGrpHeader5">
<td height="26" class="contact"><span class="contact"><span onclick="javascript:Toggle_trGrpHeader5();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader5_Img"/> <strong>Extreme</strong></span></td>
<td class="contact"> </td>
<td class="contact"> </td>
</tr>
<tr id = "rrow1" style="display:none">
<td height="26" class="contact"><select name="select6" id="select6">
<option selected="selected">-Select one-</option>
<option>QW</option>
<option>QW</option>
<option>QW</option>
<option>QW</option>
<option>QW</option>
</select></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id= "text11"/> <div style = "display: none"><img id = "calImg10" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text12"/> <div style = "display: none"><img id = "calImg11" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
<tr id = "trGrpHeader6">
<td height="32" class="contact"><span onclick="javascript:Toggle_trGrpHeader6();"><img src="plus.PNG" alt="" width="15" height="15" id = "trGrpHeader6_Img"/><strong>Others</strong></span></td>
<td class="contact"> </td>
<td class="contact"> </td>
</tr>
<tr id = "Rrow1" style= "display:none">
<td height="37" class="contact"><span class="servBodL">
<input name="search_query11" type="text" class="textbox" size="10" />
</span></td>
<td class="contact">Start: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text13"/> <div style = "display: none"><img id = "calImg12" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
<td class="contact">End: <span class="servBodL">
<input name="search_query10" type="text" class="textInput" size="10" id = "text14"/> <div style = "display: none"><img id = "calImg13" src="calendar-blue.gif" width="16" height="15"></div>
</span></td>
</tr>
</table>Below is the javascript that we used for the toggle
function toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == ('none');
tr.style.display = (bExpand ? '' : 'none');
}
function changeimage(id, plus, minus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(plus) >= 0;
if (!bExpand)
img.src = plus;
else
img.src = minus;
}
}
function Toggle_trGrpHeader2()
{
changeimage('trGrpHeader2_Img', 'minus.png', 'plus.png');
toggle('row2');
}
function Toggle_trGrpHeader3()
{
changeimage('trGrpHeader3_Img', 'minus.png', 'plus.png');
toggle('trow1');
}
function Toggle_trGrpHeader4()
{
changeimage('trGrpHeader4_Img', 'minus.png', 'plus.png');
toggle('Row1');
toggle('Row2');
toggle('Row3');
toggle('Row4');
}
function Toggle_trGrpHeader5()
{
changeimage('trGrpHeader5_Img', 'minus.png', 'plus.png');
toggle('rrow1');
}
function Toggle_trGrpHeader6()
{
changeimage('trGrpHeader6_Img', 'minus.png', 'plus.png');
toggle('Rrow1');
}SO fxm, hello again we tested the codes that you've given to us and it really works fine.. but, yes again there's is still a problem.. as you see we placed a date picker to our program thus involving it in a form problem now is how can we able to also print the image of the calendar - or soon the images that we want to be included to printing, well disabling it too whenever we want it
Note: We tried the 'display: none' but it seems we're on the wrong page of coding, for the program we did it just like hide nav bar, header footer etc. on the print preview but during printing they are still included :(
as you see we placed a date picker to our program
Actually, I don't see any code.
how can we able to also print the image of the calendar - or soon the images that we want to be included to printing, well disabling it too whenever we want it
Until I see the page and the code I can't say.
Note: We tried the 'display: none' but it seems we're on the wrong page of coding, for the program we did it just like hide nav bar, header footer etc. on the print preview but during printing they are still included :(
I don't understand this comment. My program should print only what is in the element selected - in my example <div id='test'> - and nothing outside that area. If you are selecting a larger area than necessary and then trying to hide elements within it, you may be on your own.
Thanks for you help! we did manage to fix our problems already :)
Wall, that's good news. We were nearing the point where I was going to suggest giving up on trying to print a selected element and restructure the page to divide it into frames.
For anyone who finds this discussion later, here is the latest version of the function to print a selected element [uses my cross-browser importNode, doesn't yet do CSS]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
// _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);
for (var j = attributes.length, i = 0; i < j; i++) {
if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
var attNam = attributes[i].name;
var attVal = attributes[i].value;
if (attNam == "class") { oNew.setAttribute("className", attVal); }
else { if (nodeName != "TEXTAREA") oNew.setAttribute(attNam, attVal); }
}
}
if (style != null && style.cssText != null) 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;
} // functioin
} // (!document.importNode
function printbyid(sId) {
var oPrt = document.getElementById(sId);
_oPrp = window.open('', "printpreview",
"location=no,height="+(32+oPrt.offsetHeight)+", width="+(32+oPrt.offsetWidth));
if (!document.importNode) {
_oPrp.document.body.appendChild(_importNode(oPrt, true));
} else {
_oPrp.document.body.appendChild(_oPrp.document.importNode(oPrt, true));
// copy items skipped by at least one browser
var cSels = document.getElementsByTagName('select');
for (var j = cSels.length, i = 0; i < j; ++i) {
var iSel = cSels[i].getAttribute('id');
var nSel = _oPrp.document.getElementById(iSel);
var oSel = document.getElementById(iSel);
nSel.selectedIndex = oSel.selectedIndex;
}
var cTAs = document.getElementsByTagName('textarea');
for (var j = cTAs.length, i = 0; i < j; ++i) {
var iTA = cTAs[i].getAttribute('id');
var nTA = _oPrp.document.getElementById(iTA);
var oTA = document.getElementById(iTA);
nTA.value = oTA.value;
}
}
_oPrp.focus();
_oPrp.print();
_oPrp.close();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:red">First name:</span> <input type=
"text" name="firstname"><br>
Last name: <textarea id="jlb" rows="2" cols="20" type="text" name="lastname"></textarea>
</form><select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>ow WOW! thanks thanks so much! :)
...now with CSS!
I have done a fair amount of testing in IE8/Chrome/Firefox/Safari(pc)/Opera but it is still possible that I could have missed something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<style>
td {color: red}
</style>
<script type="text/javascript">
// _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 == 'STYLE') {oNew.type = type; oNew.styleSheet.cssText = styleSheet.cssText;}
for (var j = attributes.length, i = 0; i < j; i++) {
if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
var attNam = attributes[i].name;
var attVal = attributes[i].value;
oNew.setAttribute(attNam, attVal);
}
}
} // !TEXTAREA
if (style != null && style.cssText != null) 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;
} // functioin
} // (!document.importNode
function printbyid(sId) {
var oPrt = document.getElementById(sId);
_oPrp = window.open('', "printpreview",
"location=no,height="+(32+oPrt.offsetHeight)+", width="+(32+oPrt.offsetWidth));
if (!document.importNode) {
_oPrp.document.body.appendChild(_importNode(oPrt, true));
var oPrH = _oPrp.document.getElementsByTagName("head")[0];
var cStyls = document.getElementsByTagName('style')
for (var j = cStyls.length, i = 0; i < j; ++i) {
oPrH.appendChild(_importNode(cStyls[i], true));
}
} else {
_oPrp.document.body.appendChild(_oPrp.document.importNode(oPrt, true));
// import style objects
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));
}
// copy items not imported by at least one browser
var cSels = document.getElementsByTagName('select');
for (var j = cSels.length, i = 0; i < j; ++i) {
var iSel = cSels[i].getAttribute('id');
var nSel = _oPrp.document.getElementById(iSel);
var oSel = document.getElementById(iSel);
nSel.selectedIndex = oSel.selectedIndex;
}
var cTAs = document.getElementsByTagName('textarea');
for (var j = cTAs.length, i = 0; i < j; ++i) {
var iTA = cTAs[i].getAttribute('id');
var nTA = _oPrp.document.getElementById(iTA);
var oTA = document.getElementById(iTA);
nTA.value = oTA.value;
}
}
_oPrp.focus();
_oPrp.print();
_oPrp.close();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:blue">First name:</span> <input type=
"text" name="firstname"><br>
Last name: <textarea id="jlb" rows="2" cols="20" type="text" name="lastname"></textarea>
</form><select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
<table>
<tr><td>test</td><td>test</td><td>test</td></tr>
<tr><td id='stl' colspan=2>test</td><td>test</td></tr>
</table>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>...and for those interested in the EASY method
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<title></title>
<style type="text/css">
td {color: red}
</style>
<style type="text/css" media="print">
.noprint {display: none}
</style>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:blue">First name:</span> <input type=
"text" name="firstname"><br>
Last name:
<textarea id="jlb" rows="2" cols="20" type="text" name=
"lastname">
</textarea></span>
</form>
<select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
<table>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td id='stl' colspan="2">
test
</td>
<td>
test
</td>
</tr>
</table>
</div>
<span class="noprint">
<div>
Pay attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"window.print()">
</form>
</span>
</body>
</html>Of course javascript can be used to select/deselect noprint items dynamically.
Hi guys it seems that I also have a similar project to this one and its incredible to see that this code really does exist lol =)) but I do have a problem... Hi fxm and raq_0619, I would like to ask how can I be able to get the style of my tables if i got a separate CSS page for it and my form includes at least 5 tables and that the example of fxm (the 2nd to the last code) is that the css code is also part of the html file and there is only one table where the css was used.
Sorry for the delay.
My latest version handles unlimited CSS and style= [unless there is an undiscovered bug :) ].
However, I do need to point out a couple of things. I should be getting back to you by this time tomorrow.
There are three things going on here:
1. printing selected elements
2. cross-browser PrintPreview invoked by javascript
3. _importNode() for IE
If all you want #1 (and you're prepared set up the required media=print CSS rules), this post http://www.daniweb.com/forums/post1227284.html#post1227284 earlier in this thread illustrates the technique.
If you want #2, the current version of my demo is below. It has had a fair amount of cross-browser testing but oversights are still possible. Using this approach has the clear advantage of requiring zero CSS creation/maintenance. There are subtle points:
- according to the msdn docs, handling of checked/defaultChecked changed significantly
with IE8; I have not tested earlier versions of IE
- unless the following elements have unique id's their current values may not 'preview'
in non-IE browsers: textarea, select, input(type=radio only)
If you are looking for #3 for some other purpose, please note: my demo may actually do more than you want. It is designed to import nodes (including CSS) in thair current states; if you want to import nodes in their design states instead, you will need to disable a few statements. Caution: this code was designed with a specific function in mind; I'm fairly sure that it handles 100% of the properties/attributes/styles required for displaying and printing but [especially for IE] it makes no effort to handle events or other 'irrelevant' stuff.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<style type="text/css">
td {color: red}
</style>
<script type="text/javascript">
// _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 == 'STYLE') { oNew.type = type; oNew.styleSheet.cssText = styleSheet.cssText;}
if (nodeName == 'INPUT') { oNew.type = type;
if (type=='radio'||type=='checkbox') {oNew.setAttribute('defaultChecked',checked)} // ?? IE8 only
}
for (var j = attributes.length, i = 0; i < j; i++) {
if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
oNew.setAttribute(attributes[i].name, attributes[i].value);
}
}
} // !TEXTAREA
if (style != null && style.cssText != null) 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;
} // functioin
} // (!document.importNode
function printbyid(sId) {
var oPrt = document.getElementById(sId);
_oPrp = window.open('', "printpreview",
"location=no,height="+(32+oPrt.offsetHeight)+", width="+(32+oPrt.offsetWidth));
if (!document.importNode) {
_oPrp.document.body.appendChild(_importNode(oPrt, true));
// import CSS
var oPrH = _oPrp.document.getElementsByTagName("head")[0];
var cStyls = document.getElementsByTagName('style')
for (var j = cStyls.length, i = 0; i < j; ++i) {
oPrH.appendChild(_importNode(cStyls[i], true));
}
} else {
_oPrp.document.body.appendChild(_oPrp.document.importNode(oPrt, true));
// import CSS
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));
}
// 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();
}
</script>
<title></title>
</head>
<body>
<div style="float:left" id='test'>
This is what will print
<form>
<span style="color:blue">First name:</span> <input type=
"text" name="firstname"><br>
Last name:
<textarea id="jlb" rows="2" cols="20" type="text" name=
"lastname">
</textarea>
</form><select id='choose'>
<option>
one
</option>
<option>
two
</option>
<option>
six
</option>
</select>
<table>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td id='stl' colspan="2">
test
</td>
<td>
test
</td>
</tr>
</table>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox"><br>
<input type="radio" id='g10' name='grp2'>
<input type="radio" id='g11' name='grp2'>
<input type="radio" id='g12' name='grp2' checked><br>
</div>
<div>
Pay no attention to this
<form>
User: <input type="text" name="userid"><br>
Pass: <input type="text" name="password">
</form>
</div>
<form>
<input type="button" value="Print" onclick=
"printbyid('test')">
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.