DHTML Window Widget - Print Contents of div

[crabine]

1) Script Title: DHTML Window widget (v1.1)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

3) Describe problem:
Thanks for providing such a great script, it really works well! However, I have been having difficulty implementing a print button inside the div that is displayed in the dhtmlwindow, which will print just the contents of the div. I do not want to set the print stylesheet for the entire page to print just the contents of the div, since the user should be able to print the rest of the page when they use their regular browser's print function. Most of the page is in ASP.NET 2.0 (VB). My code is as follows:



<div id="hidethis">
<!-- Bunch of page code I want to hide only when the user clicks the print button -->
</div>

<asp:Button ID="btnBudget" runat="Server" Text="Show Budget Info" OnClientClick="budgetwin=dhtmlwindow.open('budgetbox', 'div', 'divBudget', 'Budget Information', 'width=500px,height=250px,left=250px,top=50px,resize=0,scrolling=1'); return false" />

<div id="divBudget">
<div style="padding: 10px;">
<p style="float: right; width: 50px; text-align: right;"><input name="btnPrint" type="button" onclick="PrintFriendly();" value="Print" /></p>
<h1>Title</h1>
<!-- Bunch of page code that I want to print when the user clicks the print button -->
</div>
</div>

<script type="text/javascript">
function PrintFriendly() {
document.getElementById('hidethis').style.display = 'none';
document.getElementById('budgetbox').style.display = "block";
document.getElementById('budgetbox').style.height = "auto";
document.getElementById('budgetbox').style.overflow = "visible";
document.getElementById('divBudget').style.display = "block";
document.getElementById('divBudget').style.height = "auto";
document.getElementById('divBudget').style.overflow = "visible";
window.print();
window.location.reload();
}
</script>


In my screen css file, I hide the div originally: #divBudget { display:none; }
In my print css file, I change the style to show the div: #divBudget { display: block; overflow: visible; height: auto; }

When I use the script above, and click the Print button, it does not print the entire contents of the divBudget div -- It prints only the visible content of the dhtmlwindow (cuts off the rest).

I have also tried using the following javascript function instead:



<script type="text/javascript">
<!--
function printPartOfPage(elementId)
{
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var windowName = 'Print' + new Date().getTime();
var printWindow = window.open(windowUrl, windowName, 'left=0,top=0,width=0,height=0');

printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
// -->
</script>


If I use <input name="btnPrint" type="button" onclick="printPartOfPage('budgetbox');" value="Print" /> , it prints only the visible content of the dhtmlwindow (cuts off the rest) when the button is clicked.

If I use <input name="btnPrint" type="button" onclick="printPartOfPage('divBudget');" value="Print" /> , it prints a blank page when the button is clicked.

Any help is greatly appreciated.

Thanks!

[crabine]

Can anyone assist?

[ddadmin]

I gather using the IFRAME mode of displaying the contents is not an option? That would be the easiest way around this.

Based on your two approaches above, the second one should work once you fix an issue with your function. Modify the following line inside printPartOfPage() with the part in red:


printWindow.document.write(printContent.contentarea.innerHTML);

This is required to actually access the contents of the window, and not the entire window contents. Then call:


<input name="btnPrint" type="button" onclick="printPartOfPage('divBudget');" value="Print" />

[crabine]

Thanks for the tips. Unfortunately I still couldn't get it to work with your suggestions. However, I was able to get it to work with the addition of the following code to my function:


printWindow.document.write(printContent.innerHTML);
var divArray = printWindow.document.getElementsByTagName('div');
for (var i=0; i<divArray.length; i++)
{
if( divArray[i].className == 'drag-contentarea' ) divArray[i].style.overflow = 'visible';
if( divArray[i].className == 'drag-handle' ) divArray[i].style.display = 'none';
if( divArray[i].className == 'drag-controls' ) divArray[i].style.display = 'none';
}
printWindow.document.getElementById('btnPrint').style.display = 'none';

Then calling the following from my button:

<input name="btnPrint" type="button" onclick="printPartOfPage('budgetbox');" value="Print" />

The DHTML Window Widget was inserting its own divs and inline styles which was preventing the contentarea from printing in its entirety.

Hope this helps others with the same problem!