need help to print the pop up UI page

[harika19]

I Have  created an ui action button on incident table, which  pop up a ui page after clicking that , and  that ui page contains a print button  after clicking it it has to print only the UI page BUT NOT the whole page (which contains incident from in the background and ui pop up page)

can any one help  me with this how to mention the code to print only the information in ui page

below is my HTML code in ui page:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<p>Hello</p>
<br></br>
<form>
<input type="text" name="fname" placeholder=" xxxxxxx" />
</form>

<input type="button" value="Print this page" onClick="window.print()"/>

<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}
</script>

</j:jelly>

[harika19]

but the print button is also showing  in the print page, can you please  help me to remove that 

[Alok Kumar2]

Hi Harika,

Move the button out of the printableArea div element!!

<div id="printableArea">
<p>Hello</p>
<br></br>
<form >
<input type="text" name="fname" placeholder=" xxxxxxx" />
</form>
</div>
<input type="button" value="Print this page" onClick="printDiv('printableArea')"/>

Please mark it correct if it works!!

[harika19]

HI Alok,

i have to remove header and footer automatically when page appears for printing, can you help me with this.

i am using below clientscript in ui page but no luck,

function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

[Alok Kumar2]

You can place only the contents that you want to be printed inside the div with id-printableArea and not include the header and footer in this div.

It would be helpful if you paste the html content of your ui page so that i can suggest more accurate solution.

Thnx!