making the control visible in JavaScript, but invisible on web page

Question

I have two controls on my web page. The style of those two controls is set to display none. I want to display these two controls when printing, but I don't want these controls to show up on my web page. whenever I invoke the print function, these two controls show up on the print page, but they also show up on the web page whenever I am done printing. Below is my web page code:

<div id="test">
<span style="display:flex">
<img id="PARLogo" style="display:none" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70" runat="server" >
<span id="compName" runat="server" style="font-size:25px;color:black;width:100%; display:none"><span style="color:black">&nbsp;city of test</span><br />&nbsp;Test company</span>
</span>
</div>
<input type="button" id="btnPrint" value="Print" />

Below is the code to print the div tag:

<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
var contents = $("#test").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>

as you can see, I am making these two controls "PARLogo" and "compName" visible n javascript, but they are invisible in a web page. Not sure why, but these controls are invisible when the page loads, but as soon as I click on the print button, these two controls appear on the regular web page too which I don't want.

any help will be greatly appreciated.

Freedruk · Accepted Answer · 2021-09-20 22:44:14Z

1

have you tried css media query "print"?

@media print {
 /* print specific styles go here */
}

or reset these:

document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
.....
frame1.remove();
document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
document.getElementById('<%=compName.ClientID %>').style.display = "none";

answered Sep 20, 2021 at 22:44

Freedruk

4472 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

making the control visible in JavaScript, but invisible on web page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related