I am using this code to print a specific div
CSS
<style type="text/css" media="print">
* {
display:none;
}
#printportion {
display:block;
}
</style>
Script
<script>
var printCalender=function () {
setTimeout(window.print, 1500);
}
</script>
When I run my page in google chrome, the print preview window is blank and shows 'print preview failed'
The issue is that regardless of where your targeted element is positioned in the DOM, your * selector will match any and all parents it has (including <html> and <body>) so the element will never be shown.
See the below example:
* {
display: none;
}
#showme {
display: block;
}
<div id="showme">This will never be shown</div>
As Nit said the problem is with your * selector. You can use one selector with #media print like this:
#media print {
body.print-element *:not(.print) {
display: none;
}
}
Here you have a working example where you can print any clicked element and/or the entire normal HTML document:
function print_this(elem) {
document.body.classList.add('print-element')
elem.classList.add('print')
window.print()
document.body.classList.remove('print-element')
elem.classList.remove('print')
}
document.querySelectorAll('div').forEach(elem =>
elem.onclick = () => print_this(elem))
div {
display: inline-flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: #e9a9c7;
color: #39464e;
cursor: pointer;
}
#media print {
body.print-element *:not(.print) {
display: none;
}
}
<div>Print 1</div>
<div>Print 2</div>
Note: if you cannot see colors remember to click Background Graphic (Chrome) or similar in your print options.
Related
On a project im using Bootstrap 3.3 to show and graph some data, on screen it shows perfect but I also need to print a report using boostrap printing classes
Is there a way to Switch positions between 2 blocks ONLY WHEN PRINTING the page?
Thanks for your Help!!!
If you use flex-box on an element containing both, you could use the order property inside of a print media query to change it:
document.getElementById('simulate').addEventListener('click', function() {
document.getElementById('container').classList.toggle('print');
});
#container {
display: flex;
flex-direction: column;
}
#container > div {
width: 100%;
border: solid 1px;
}
#media print {
#container > div:first-child {
order: 2;
}
}
#container.print > div:first-child {
order: 2;
}
<div id="container">
<div>Top</div>
<div>Bottom</div>
</div>
<button id="simulate">Simulate Print</button>
I coded this script. If the window size is smaller than 1000px, it is possible to unfold the menu points.
But, if you collapse the menu points and increase the window size, the menu points still stay hidden. I don't get it to fade them in then again.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<nav>
<h2>S U P E R</h2>
<button class="button" onclick="fold()">FOLD</button>
<div id="folding">
<a>Under Construction 1</a><br>
<a>Under Construction 2</a><br>
<a>Under Construction 3</a><br>
<a>Under Construction 4</a><br>
</div>
</nav>
</body>
</html>
CSS:
#folding {
display: block;
}
.button {
display: none;
}
#media screen and (max-width: 1000px) {
.button {
display: block;
}
#folding {
display: none;
}
body {
background-color: red;
}
}
JS:
function fold() {
var x = document.getElementById("folding");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
Your problem is with css specificity (See Specificity).
A simple and quick(not great) solution to achieve your goal is to invert media logic and apply important for the property to override inline rule display:none;:
.button {
display: block;
}
#folding {
display: none;
}
#media screen and (min-width: 1000px) {
#folding {
display: block !important;
}
.button {
display: none;
}
}
When you do x.style.display = "none"; you are adding an inline-style that has priority against classes and id styles. The best way to you do what you want is to create different classes (.folding-visible, etc...) and control which class will be applied depending on the viewport.
We have been working on a project where the contents in the html page needs to be printed in the dot matrix printer using a JavaScript print function. The issue we are facing is that there is blank space after the contents are printed.
The page settings is A4 / Legal as there cannot be a definite height since the height of the contents printed may vary.
We have tried using the following CSS:
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
##media all {
.page-break {
visibility: hidden;
}
}
##media print {
body * {
display: none;
height: 0;
}
}
You can try adding space between ## and media like so ## media. There is a bug like that with .NET Razor.
You could also use #page to manipulate margins, size and page breaks.
MDN: The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
Or you can also try this
<style type="text/css">
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
</style>
<style type="text/css" media="all">
.page-break {
visibility: hidden;
}
</style>
<style type="text/css" media="print">
body * {
display: none;
height: 0;
}
</style>
GOAL: Eliminate redundancy in the initial DOM by implementing reusable JS (or ASP ?).
In this example I want to write some JS to 'bump' the contents of div # id loc-A to the div # id loc-B, without having to have the exact same code written in two places on the page.
I'm just not sure where to start...?
I have been able to accomplish this with CSS quite easily, but with redundant code. The more a div element contains, the longer the load.
Here is my codepen example:
See the Pen redundant_panda by rorschaff (#rorschaff) on CodePen.
<html>
<head>
<style>
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
#loc-A {
display: initial;
}
#loc-B {
display: none;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
display: none;
}
#loc-B {
position: relative;
top: 250px;
display: initial;
}
}
</style>
</head>
<body>
<div id="loc-A">
<img src="http://bit.ly/1TAzmvg"/>
</div>
<!----- Down the page somewhere ----->
<div id="loc-B">
<img src="http://bit.ly/1TAzmvg" />
</div>
</body>
</html>
I feel like there's something missing in this, but here's how I would address the code provided.
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
position: relative;
top: 250px;
}
}
#loca-A {
display: initial;
}
And just get rid of the other div.
You could also address this via a responsive framework (bootstrap, foundation) or really, a number of different ways. I think the better approach would be to think about what problem you are solving and how you are solving it. If you find yourself using the same code repeatedly, then maybe your how needs to be revisited.
I'm currently working on my new website and I need help.
When you open the site you get a landing page with icons (sort of menu bar) and you can't scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.
Current css:
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: hidden;
}
Example jquery:
$("nav").on("click", function(e) {
$('html, body').css('overflowY', 'visible');
}
I am quite a noob about this so don't blame me for a weird kind of script. I am trying to learn javascript and jquery.
You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.
HTML:
Show whole page
Congratulations. You are viewing the page
JS:
$(document).ready(function () {
$("#loadpage").click(function () {
$("html").addClass("loaded");
});
});
CSS:
#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }
Demo:
http://jsfiddle.net/FHPzb/