How can I hide my inputs when printing my webpage? - javascript

I am using the script below:
<script>
function printpage()
{
window.print()
}
</script
To call it after with this:
<input type="button" value="Print this page" onclick="printpage()" />
But I don't know how to insert in the script this:
$('input' )
.hide();
Meaning that all the input from the print area is hidden.
Any ideas?

You can solve this using CSS by specifying the media type as print:
<style type="text/css" media="print">
/*<![CDATA[*/
input{
display:none;
}
/*]]>*/
</style>

Use #Media CSS rule:
#media print {
input {visibility:hidden;}
}
or
#media print {
input {display:none;}
}
The choice between these options depends on your page flow: display:none removes the input completely, while visibility:hidden simply hides it, but it still occupies its place.
You don't need to hide it in JavaScript.

Related

Add element styling when JavaScript is disabled

I'm trying to avoid adding online styling when JS is being disabled.
For example, I'd like to hide an element in the body when JS is disabled, but i'd like to do it from external CSS only.
I'd like to avoid adding style like below
<noscript>
<style>
...some style
</style>
<p class="no-js">You need Javascript enabled to view all of the content on this page.</p>
</noscript>
<body>
<div>element to hide when js disabled</div>
</body>
Is there an alternative to this?
Thanks!
" I'd like to hide an element in the body when JS is disabled "
You can create a class with display:none, assign it to all elements you want to hide if javascript is disabled, and through javascript remove this class from these elements, if javascript is disabled, then this class will always apply and all elements with this class are not displayed
JS Fiddle
var secrets = document.querySelectorAll('.secret');
for (var i in secrets) {
secrets[i].classList.remove('secret');
}
.secret {
display: none;
}
Try this code:
<noscript>
<style>
#foo {
display:none;
}
</style>
</noscript>
You should use <noscript> tag, for hide an element, in <style> tag make it display:none. there is no way to this with standalone css! but you can do this with javascript or etc, look other answer.
<noscript>
<style type="text/css">
.divtohide {display:none;}
</style>
<div class="divtohide">
Javascript is disabled!
</div>
</noscript>
Alternatively, just use Javascript to hide the div that tells users that they need js enabled (if Javascript is disabled, obviously it cannot hide the div, and it will be shown).
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('nojs').style.display = "none";
});
</script>

Print function not to print the whole page using jquery and css

Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:
print.css
<style type="text/css" media="print">
.img{
padding:5%;
height:100%;
width:40%;
}
#img1{
left:0px;
}
</style>
js
$("#printBtn").click(function() {
$("link[media='screen']").attr("href", "print.css");
window.print();
});
Updated:
To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?
Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks
<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
Why do you change you <link media='screen' /> to a print.css stylesheet?
It's better practice if you would just use a screen and a print stylesheet side by side. No Javascript / jQuery needed for that:
<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />
<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.
Then, in your CSS you do something similar to this:
default.css
#print-wrap { display: none; }
print.css
img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }
Update
Updated the answer corresponding to the updated question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;
You could make the whole page (i.e) body hidden.
With CSS:
body {
visiblilty:hidden;
}
Then make your div visible (where your image is rendered)
#yourdiv{
visibility:visible;
}
Then use window.print(); which would print #yourdiv
Your print css and screen css will not be used together while you are on screen (webpage), the print css will be referred ONLY when your media is print (print).
Whenever a print command is issued, the print css is referred along with the screen css, with print specific css properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print command was issued.
From W3,
print
Intended for paged material and for documents viewed on screen
in print preview mode.
In your specific case, you want to print only 2 images, rather than all of them. So,
print.css :
img {
display: none;
}
#img_34, #img_35 { /*Image id's*/
display: block;
}
To test pages using a print css, simply do a print preview in the browser to get an idea of how it looks, and press Esc to return to the page.
If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine

Hide/show divs when printing to printer

Is it possible to click on a button/image/link on a page and include/exclude other elements from being printed? (on an actual printer)
I'd like to give the users the selection of which elements to print. Is this feasible with jQuery of Javascript?
Edited for better understanding: I'd like to let the user choose which parts of the page he wants to print by adding a print this/don't print this button next to each div, overriding the default settings i've set in my print.css file.
Update: After Richard Neil Ilagan's suggestion, i've tried the following and I feel I'm close but cant nail it. Any suggestions?
<style type="text/css">
#media print {
.no-print { display:none; }
}
</style>
<script>
$(document).ready(function() {
$('.dontPrint').click(function() { $('maybe').addClass('no-print'); });
});
</script>
<img class="dontPrint" src="images/cancel.png" title="Dont print bla bla" /></a>
<div id="maybe">bla bla</div>
Yes. You can do that by using CSS's #media print media type selector. Example (hide all inputs when printing):
#media print {
input {
display: none;
}
}
As a design pattern, you may combine print media selector with the rest stylesheets to achieve toggle effect.
HTML:
<div class="for-screen">
<input type="submit" value="Shown when not printing">
</div>
<div class="for-print">
<p>Shown instead when printing</p>
</div>
CSS:
.for-screen {display: block;}
.for-print {display: none;}
#media print {
.for-screen {display: none;}
.for-print {display: block;}
}
More stuff on the matter:
Media types on CSS2 standard
CSS Design: Going to print (alistapart.com)
you should set that with css.
media="print"
Try something like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

write JavaScript on JavaScript rendered html page

Here is my code:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
win=window.open();
win.document.write("<html>");
win.document.write("<head>");
win.document.write("<style type=\"text/css\">");
win.document.write(".vis{visibility:hidden;}");
win.document.write("</style>");
win.document.write("</head>");
win.document.write("<body>");
win.document.write("<table align=\"center\">");
win.document.write("<tr><td>result:</td><td>100,--€</td></tr>");
win.document.write("<tr><td colspan=\"2\" id=\"idcko\"><input type=\"button\" value=\"click\" onclick=\"window.print();vlozenie()\"/></td></tr>");
win.document.write("</table>");
win.document.write("</body>");
win.document.write("</html>");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage();" />
</form>
<script type="text/javascript">
function vlozenie()
{
var y = win.document.getElementById("idcko");
y.innerHTML="<input type=\"button\" value=\"click2\" class=\"vis\"/>";
}
</script>
</body>
</html>
Now I want to print the rendered page, but I want to hide the print button. So is it possible to write some JavaScript functions in an "onclick" event, or may I access the JavaScript function which is located on the mother page?
I found some examples to add "class" attributes for HTML elements:
$("#idcko").addClass("vis");
but it has to be written in JavaScript tags, which I can`t write like this:
win.document.write("<script type=\"text/javascript\">some functions()</script>");
because the rendered page is now incorrect.
you can add in your css style #media print and then hide the element that contains the printer icon using display:none
#media print {
selectorForPrinterIcon { display:none }
}
Of course you can follow the same way to hide any other element that you want to be hidden in the printed version. So, there is no need for javascript.
you need to just call jquery $("#PrintButtonId").hide()
hope this help.

Print using Javascript?

I have particular division in my web page. i want to print that div only when click "print" in my web page. i have some javascript code. But that is not well formatted.
Is there any javascript to print particular division from my web page?
Thanks in advance
Gnaniyar Zubair
You can specify CSS stylesheets with the attribute media="print" and apply the style display: none; to all elements except those which you want printed.
For example:
print.css
* { display: none; }
div.print_block { display: block; }
page.html
<HEAD>
<LINK rel="stylesheet" type="text/css"
media="print" href="print.css" />
</HEAD>
<DIV class="print_block">
...
</DIV>
If you want to hide some divs when printing, you can set them to "display: none" in a print media section of your stylesheet, and they won't appear.
eg, in your stylesheet:
#media print {
div.header {
display: none;
}
div.printable {
page-break-inside: avoid;
page-break-after: always;
}
}
This answer is almost exactly the same as the two which beat me by 4 minutes :-) , just a note that you don't need a whole separate stylesheet if you don't want to ...
Also, the "page-break-inside: avoid;" and "page-break-after: always;" clauses are good
for printing out a few divs, each on its own page.
Check this jQuery plugin jqPrint. It seems to do what you want.
I don't think there is a direct way of doing this. You can however:
Create a special CSS for media=print where all but the one div you want to print is hidden, OR
Use a hidden iframe for the content you want to print
Googling with the terms "javascript print partial page" may help you find some tutorials.
I saw smf like that in one project at my job.
You have to open popup in popup you put content from parent page which you wanna to print. And it's all :)

Categories

Resources