By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,784 Members | 3,582 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,784 IT Pros & Developers. It's quick & easy.

print div only, via copying into hidden iframe first

P: n/a
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
Share this Question
Share on Google+
10 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.