Hi I have a situation where I want to show a button to user to Suppose like:
"Print" on click this button I want to show print preview to user that is a html table which I want to print. But I do not want header and footer that is using my application to all pages to show in this print preview to user.
So how can I make this possible to printout a html page without header and footer only content part.
Please help me I have tried many solutions for this but did not get worked anymore. I am using php scripting language(Symfony2 framework)
Thanks in advance
<style>
#media print
{
#header{
display:none;
}
#footer{
display:none;
}
</style>
This will make your header and footer invisible at print preview or printing time.
In you css, add the classes and specify this class for the container element of the header and footer which has to be hide while printing.
#media print
{
.print
{
display: none !important;
}
}
Hide header and footer when you are printing.
<html>
<script>
function print1(){
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("print").style.display="none";
window.print();
}
</script>
<div id="header">Header</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<input type="button" onclick="print1()" id="print" value="print">
</html>
Related
i need to display:none to my print button after clicking it. But that printing page open with window.open command. so i tried to inline css to not displaying it for printing but it not working.
this is where i put inline css
<input type="button" style=" #media print{ display: none; }" id="printPageButton"
onclick=" window.print(); " class="printPageButton noprint" value="Print" >
Media query doesn't exists in Inline CSS. You can use CSS #media queries in external CSS file. For instance:
#media print {
#printPageButton {
display: none;
}
}
<h1>Content to print</h1>
<button id="printPageButton" onClick="window.print();">Print</button>
The styles defined within the #media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a page with "Content to print" text.
I am using jQuery Sticky header in my theme. It seems to work fine in most of the pages but in two pages it is displacing the content to the right on load and on scrolling down it places it back in the right position. i am trying to debug the issue with no results.
On Page Load
On Scroll
DEMO Link
Adding this will fix the problem:
.page {
width:100%;
}
Try removing overflow: hidden from .page at your css
.page {
overflow: visible
}
<div style="height: 50px;" class="sticky-wrapper" id="undefined-sticky-wrapper"></div>
<!--- PLEASE INCLUDE -->
<div style="clear:both"></div>
put style="clear:both" after header main div (#undefined-sticky-wrapper)
Used "clear:both" on .page
.page {
clear: both;
}
The problem is that the #nav is overflowing out of your header and pushes the page to the right side.
I have a html page, having two div's.Left div contains all contents(INDEX of pages) with hyper-links.Now i want to display the content in the right div, that the user has clicked.In right div i have divided the page horizontally into 3 parts..10%,80%,10%.In that 80% horizontal div it shd display the content.I tried by using the target attribute in anchor tag, but it is not showing in that right div.How to solve this?
You can Try This:
css:
div {
width:90%;
height:800px;
position:relative;
background-color:blue;
}
a {
color:white;
font-size:24px;
}
html:
<div id="one">Top of Page</div>
<div id="two">Go to Top</div>
<div id="three">Go to Two</div>
You can try using Iframes. Can refer this site to get started: http://www.dtp-aus.com/frm_sets/frames.html
I have a webpage that is 95% dynamically generated by user selections and content pulled from a DB.
As part of the website the user uses canvases (kind of like powerpoint) and save the completed canvases to images. The images are then stored in the HTML in a div that has display:none.
What I want is the ability to click a button or just press print and have those images be the only things selected to print. Even better would be to print each individual image on a different page.
I have tried using #media print in various combinations with display:none/block and visibility:hidden/visible, but that does not seem to work, there is always residual content on the page.
In fact I cannot even see a print preview of the entire page without adding:
#media print{
*{
display:block;
}
}
Am I having CSS print problems b/c the contents of the page are created dynamically? Or is there another question I should be asking?
Thanks in advance for any help!
To re-iterate my problem: I had images in html that were hidden in a div that was not displayed. I wanted to print only those images to a PDF.
For those interested here is my solution. My HTML looks like this:
<div id="head">
<div id="img_group" style="display:none">
<img href="img 1" />
<img href="img 2" />
</div>
</div>
<div id="contents"></div>
I tried a CSS solution that did not exactly work: #Radoslaw M
* {
display: none;
}
does not work because this overrides any display: block; that follows. So my solution was originally to combine display:none and visibility:hidden the following css worked to display only the id="img_group div:
body{
visibility:hidden;
}
#contents{
display:none;
}
#img_group{
visibility:visible;
}
However the problem with this solution is that visibility:hidden leaves blank space where the div tags should have been.
Here was my round about solution. I used some javascript, a print button, and jsPDF (http://jspdf.com/):
<div id="head">
<button id="print">Print</button>
<div id="img_group" style="display:none">
<img href="data:img 1" />
<img href="data:img 2" />
</div>
</div>
<div id="contents"></div>
<script>
var doc = new jsPDF('landscape','pt', 'computer');
var i = 0;
$('#img_group').find('img').each(function(){
if(i != 0){
doc.addPage();
}
var imgData = $(this).attr('href');
doc.addImage(imgData, 'JPEG', 0, 0, 1067, 600);
i++;
});
doc.save('test.pdf');
</script>
This solved my problem of printing these hidden images to a PDF and even allowed me to print each image to a different page in the PDF. I hope this solution helps anyone else who has this problem in the future!
let say i have a print button on couple of pages and whenever user click .
it will pop up the content in a modal and can print from there.Any idea will be appreciated.
I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.
I can't write the code for you right now but I can put you on the right track..
You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call print on the iframe ($('iframe').window.print;)
Let me know if this makes sense?
EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)
<body>
<script>
$(document).ready(function(){
$('#printmodal').click(function(){
// variables
var contents = $('#printable').html();
var frame = $('#printframe')[0].contentWindow.document;
// show the modal div
$('#modal').css({'display':'block'});
// open the frame document and add the contents
frame.open();
frame.write(contents);
frame.close();
// print just the modal div
$('#printframe')[0].contentWindow.print();
});
});
</script>
<style>
#modal {
display: none;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
top: 100px;
}
</style>
<!-- Printable div (or you can just use any element) -->
<div id="printable">
<p>This is</p>
<p>printable</p>
</div>
<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>
<!-- Modal div (intially hidden) -->
<div id="modal">
<iframe id="printframe" />
</div>
</body>
jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/