473,325 Members | 2,872 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

print div only, via copying into hidden iframe first

jon
I'm trying to use a hidden iframe to print the contents of one div
seamlessly. Currently I can create the hidden iframe, copy the
contents of the div to the iframe, and print it. I even have a method
that initially copies all the original page's styles onto the new
iframe to maintain look and feel.

So far things work, and the div (along with look and feel from styles)
are successfully copied to the iframe and printing just the hidden
iframe works.

The problem I'm facing is that the printed page doesn't have any of the
styles applied that I copied across, even though they are visible in
the iframe when viewing it.

Anyone have any idea why this might be?
Below is the code, copied and pasted, for reference.


var printObj = document.createElement('iframe');
printObj.id = baseObj.id + 'BoxPrint';
printObj.style.width = document.body.clientWidth;
printObj.style.height = document.body.clientHeight;
printObj.style.display = 'none';
document.body.appendChild(printObj);
function printDiv(divObj){
// copy all parent styles to iframe for proper "look and feel"
copyStylesAcrossWin(top,this.printObj.contentWindo w);

// now copy non-styled content in
printObj.contentWindow.document.body.innerHTML = divObj.innerHTML;

// just for debugging
printObj.style.display='';
alert(printObj.contentWindow.document.body.outerHT ML);
}

function copyStylesAcrossWin(win1, win2){
if(win1 == null || win2 == null){ return; }
var linkNodeArr = win1.document.getElementsByTagName('link');
var headNodeObj = win2.document.getElementsByTagName('head').item(0) ;
for (var i = 0; i < linkNodeArr.length; i++) {
if (linkNodeArr[i].rel != null && linkNodeArr[i].rel == 'stylesheet')
{
var styleObj = win2.document.createElement('link');
var attribArr = linkNodeArr[i].attributes;
for (var j = 0; j < attribArr.length; j++){
styleObj.setAttribute(attribArr[j].nodeName,
attribArr[j].nodeValue);
}
headNodeObj.appendChild(styleObj);
}
}
}

Dec 5 '06 #1
10 3749
ASM
jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
why won't you display only this div ?

function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #2
ASM wrote on 05 dec 2006 in comp.lang.javascript:
jon a écrit :
>I'm trying to use a hidden iframe to print the contents of one div

why won't you display only this div ?

function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}
don't need so much JS for that:

========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>

<body>
<div><button onclick='print();'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv'>Print only this</div>
<div>qwerty</div>
</body>
===============================
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Dec 5 '06 #3
jon
Both the last two posts are good suggestions... but the page it is
coming from is quite complex where the div just one small section (3%
maybe), or the total page. And I will have many divs that have the
ability to print themselves. So I'd have to apply the printDiv class
dynamically somehow. Likewise, I have the ability to print he entire
page, so these classes can't interfere with that.

Still trying to get the iframe solution going...

On Dec 5, 3:06 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
ASM wrote on 05 dec 2006 in comp.lang.javascript:


jon a écrit :
I'm trying to use a hidden iframe to print the contents of one div
why won't you display only this div ?
function prtObj(idObj) {
idObj = document.getElementById(idObj);
var all = new Array();
var i =0;
while(document.body.firstChild)
{
all[i] = document.body.removeChild(document.body.firstChild );
i++;
}
document.body.appendChild(idObj);
print();
document.body.removeChild(idObj);
for(var i=0;i<all.length;i++)
document.body.appendChild(all[i]);
}don't need so much JS for that:

========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}}</style>

<body>
<div><button onclick='print();'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv'>Print only this</div>
<div>qwerty</div>
</body>
===============================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)- Hide quoted text -- Show quoted text -
Dec 5 '06 #4
ASM
Evertjan. a écrit :
ASM wrote on 05 dec 2006 in comp.lang.javascript:
>why won't you display only this div ?

function prtObj(idObj) {
....
>}

don't need so much JS for that:
Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :-)
========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>
and where is the function to choose the div ?
<body>
<div><button onclick='print();'>Print it</button></div>
<div>qwerty</div>
<div>qwerty</div>
<div class='printDiv'>Print only this</div>
<div>qwerty</div>
</body>
===============================


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #5
ASM
jon a écrit :
Both the last two posts are good suggestions... but the page it is
coming from is quite complex where the div just one small section (3%
maybe), or the total page.
Something like I did test before to post my idea
(file : more than 600 lines of html)
(div : a table with 2 rows)
And I will have many divs that have the
ability to print themselves.
They have a brain ? (to be capable to decide by themselves)
Still trying to get the iframe solution going...
in your iframe have a page opened similar to your main page, but with
empty body

then

function prtObj(idObj) {
var to = parent.myFrame.document.body;
var from = getElementById(idObj);
var i=0;
while(to.firstChild) {
to.removeChild(to.firstChild);
i++;
}
to.appendChild(from);
parent.myFrame.print();
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #6
ASM wrote on 05 dec 2006 in comp.lang.javascript:
Evertjan. a écrit :
>ASM wrote on 05 dec 2006 in comp.lang.javascript:
>>why won't you display only this div ?

function prtObj(idObj) {
...
>>}

don't need so much JS for that:

Certainly not but it is too funny to see the page emptying,
the only one div,
then the page to re-fill up :-)
[If you want that that can also be done with a rippling
....display='none']
>
>========= test.html ===========
<style>
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>

and where is the function to choose the div ?
Where?

That is easy to write in clientside JS, don't you think?

function printdiv(divId) {
var divId = document.getElementById(divId);
divId.className='printDiv';
print();
divId.className='';
};

><body>
<div><button onclick='printdiv('thisDiv');'>Print it</button></div>
><div>qwerty</div>
<div>qwerty</div>
<div id='thisDiv'>Print only this</div>
><div>qwerty</div>
</body>
===============================




--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Dec 5 '06 #7
ASM
Evertjan. a écrit :
>
[If you want that that can also be done with a rippling
...display='none']
Ho no ! too much easy :-)
Where is the pleasure ?
That is easy to write in clientside JS, don't you think?
No, I'll have to try what that give with a div which already has a class.
function printdiv(divId) {
var divId = document.getElementById(divId);
divId.className='printDiv';
print();
divId.className='';
};
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #8
ASM wrote on 05 dec 2006 in comp.lang.javascript:
>That is easy to write in clientside JS, don't you think?

No, I'll have to try what that give with a div which already has a class.
You can temporarily swap the className:

function printdiv(divId) {
var divId = document.getElementById(divId);
var temp = ivId.className
divId.className = 'printDiv';
print();
divId.className = temp;
};

===============================

And even then why "have to"?
As a programmer you are in charge!!!

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Dec 5 '06 #9
ASM
Evertjan. a écrit :
You can temporarily swap the className:

function printdiv(divId) {
var divId = document.getElementById(divId);
var temp = ivId.className
divId.className = 'printDiv';
divId.className='printDiv '+temp; // no ?
print();
divId.className = temp;
};

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #10
ASM wrote on 06 dec 2006 in comp.lang.javascript:
Evertjan. a écrit :
>You can temporarily swap the className:

function printdiv(divId) {
var divId = document.getElementById(divId);
var temp = ivId.className
divId.className = 'printDiv';

divId.className='printDiv '+temp; // no ?
NO !!!!

The classname is staticly defined as the one that will print,
and is dynamicly assigned to the id-ed div that you want to print.
> print();
divId.className = temp;
};
Try this:

========= test.html ===========

<style>
@media screen {
div {background-color:white;}
div.printDiv {background-color:yellow;color:red;}
}
@media print {
div {display:none;}
div.printDiv {display:block;}
}
</style>

<script type='text/javascript'>
function printdiv(divId) {
var divId = document.getElementById(divId);
divId.className='printDiv';
print();
alert('Only this is printing [uncoloured!]:\n'
+ divId.innerHTML)
divId.className='';
alert('Back to normal display')
};
</script>

<body>
<div>
<button onclick='printdiv("d1");'>Print 1</button>
<button onclick='printdiv("d2");'>Print 2</button>
<button onclick='printdiv("d3");'>Print 3</button>
<button onclick='printdiv("d4");'>Print 4</button>
</div>
<div id = 'd1'>qwerty 1</div>
<div id = 'd2'>blah 2</div>
<div id = 'd3'>asdfg 3</div>
<div id = 'd4'>blah 4</div>
</body>

===============================


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Dec 6 '06 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Madame Blablavatsky | last post by:
hello, i am trying to build a kind of very, very simple ritch text editor for people to use with a very simple cms. at the moment i am working on the basic structure. the text is put in an...
2
by: Kosarko | last post by:
Hello, I know this should be kind of easy, but I am very unfamiliar with Javascript. What I am looking to do is have an image (coupon) that when clicked on, it either prompts for printing...
2
by: eclectic.01 | last post by:
I need to control the way a document is printed ... I would like a user to print a 'ticket', however, if multiple 'tickets' are selected, each ticket must be printed separately (separate piece of...
2
by: zlarson | last post by:
I have a website where a div's innerHTML is replaced with a string: <input type="button" name="myButton" id="myButton" onClick="printReport();"><IFRAME name="myFrame" id="myFrame"></IFRAME> which...
4
by: Drew | last post by:
This might beyond the scope of this group because it deals with SharePoint, but I'm not sure if I can't get it to work because of SharePoint or because JavaScript is weird (I don't have much...
2
by: prophet | last post by:
how do I create a print button that is on my index page that prints my target page (and only the target page) I tried <INPUT onclick=window.print(); type=button value="Print This Page"...
5
by: pbd22 | last post by:
Hi. I am trying to poll a long-running process via a hidden IFrame. I am noticing that the online errata gives advice for handling a server response: window.parent.handleServerResponse(); ...
4
by: solanki | last post by:
> Hi Folks, > > I am finding a small trouble while printing the entire contents of an > Iframe which carries an html report which is in turn generated by > jasper reports.s > > Hear is the...
6
by: buntyindia | last post by:
Hi, I have a page. There is a section 'sidebar' where bulleted text is there. Just after first bullet there is a hidden IFRAME. That go visible on clicking of that bullet text. My problem is...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.