In my html, there are header, sidebar, footer, and <main>. They are convenient when reading on browser, but when reader print the page, I want them to print only the <main> part because sidebar... etc are not necessary when printed on papers.
Can i select the visible parts when printed?
Here is what I have used to print only the desired content.
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Side Bar Content
</div>
<div id="printable">
Main Content
</div>
</body>
sure, you use a media query.
using a media query in your css
#media print {
… css goes here
}
You could also use a seperate print.css file
here is an article that goes into greater details
Try window.print for printing:
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
Then use css to style the items for printing:
#media print
{
header{
display: none;
}
}
Related
I've been trying to have different images show up on my main page based on screen size. None of the solutions I've seen online are helping. Instead, both images are showing on all screens. Here is one of the methods I've tried. First, in my stylesheet, I put:
.screen-only {
display: block;
}
.mobile-only {
display: none;
}
#media screen and (max-width: 480px) {
.screen-only {
display: none;
}
.mobile-only {
display: block;
}
}
Then, in my main page, I have:
<div id="titleBar" class="screen-only">
<img src="assets/images/screenpic.png" class="screen-only" />
</div>
<div id="titleBar" class="mobile-only">
<img src="assets/images/mobilepic.png" class="screen-only" />
</div>
I'm confused if I should be putting the class in the div or in the image section, but either way I put it, or if I put it twice like I did in the example here, both images show up on all sizes.
you code seems correct except that your second "div" does not have the same class in the "div" and "img" tags. Your "img" tag should have a class of "mobile-only" not "screen-only"
One possible source of error and confusion is you are using screen-only and mobile-only as a class names. Maybe it is allowed but it is confusing and not hard to avoid.
Another possible error is that you have marked both images with the class screen-only.
The following is I think a bit clearer and should actually work:
in css
div.responsive {
background-image: url("assets/images/screenpic.png");
}
#media only screen and (max-width: 480px) {
div.responsive {
background-image: url("assets/images/mobilepic.png");
}
}
in html
<div id="title-bar" class="responsive"> </div>
here is a complete html file with inline styles that show what you are after. I have used images from SO just to show that it works, you should replaace the img tags with your images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.responsive {
background-color: lightgreen;
}
#mobile-title {
display: none;
}
#desktop-title {
display: block;
}
#media only screen and (max-width: 480px) {
div.responsive {
background-color: lightblue;
}
#mobile-title {
display: block;
}
#desktop-title {
display: none;
}
}
</style>
</head>
<body>
<div id="mobile-title" class="responsive">
<img src="https://i.stack.imgur.com/9LROA.png?s=32&g=1" width="32" height="32">
</div>
<div id="desktop-title" class="responsive">
<img src="https://www.gravatar.com/avatar/598b1b70f462d6708ff9a459a102d500?s=32&d=identicon&r=PG&f=1" alt="" width="32" height="32">
</div>
</body>
</html>
I have the following SASS structure
.entry {
//some styles here
.banner {
border:4px solid red;
.position {
display: inline-block;
}
}
}
And in html
<div class="entry">
<div class="banner>
<div class="position"></div>
</div>
</div>
Now I want to change the style of .banner and .position when an extra class is added to the entry.
<div class="entry team1">
<div class="banner>
<div class="position"></div>
</div>
</div>
This is a problem I have encountered lots of times and have never found a clean way to do it, the & operator or the #extend could be options but ideally I would like to group all the styles which have the same class.
Any suggestion on how I could write this pattern as efficiently as possible would be appreciated?
Well I would suggest something like that:
.entry {
.banner { /* defaults */ }
&.team1 {
.banner {
/* changes */
.position { /*changes */}
}
}
}
As far as I know, it is not possible to »traverse up the tree« in css, so it wont in scss either.
Another thing that comes to my mind is the #at-root what moves the rule to the root of the generated css. But all in all this will result in a »global« class definition, so I guess that is not what you want.
In my styles/app-theme.html I am trying to change the menu icon size of paper-drawer-panel in the media query. This element is in index.html. Since it is in the shadow dom, I can't seem to access it. I tried with:
Probably not relevant, but here is the index.html:
<template is="dom-bind" id="app">
<paper-drawer-panel force-narrow="true">
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<div id="header-v-center">
<paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
#media (max-width: 600px) {
iron-icon#icon::shadow {
height: 6px;
width: 5px;
}
}
and
#media (max-width: 600px) {
:root {
--iron-icon-height: 6px;
--iron-icon-width: 50px;
}
}
To no success. Any suggestions?
Polymer currently uses a shim (a partial polyfill) to evaluate custom properties. As such, they aren't automatically recalculated. What you can do, however, is use iron-media-query (or directly use matchMedia) to know when to call updateStyles on the element(s) that need updating.
Here's an example of using updateStyles:
Polymer({
is: 'seed-element',
properties: {
largeScreen: {
type: Boolean,
observer: '_largeScreenChanged'
}
},
_largeScreenChanged: function(newValue) {
this.updateStyles({
'--h1-color': (newValue ? 'red' : 'blue')
});
}
});
<dom-module id="seed-element">
<template>
<style>
h1 {
color: var(--h1-color, red);
}
</style>
<h1>header</h1>
<iron-media-query query="(max-width: 600px)" query-matches="{{largeScreen}}"></iron-media-query>
</template>
</dom-module>
<seed-element id="topmenu"></seed-element>
I have this button which contains Upgrade my account.
I'd like to have a rule that says for screens less than 990px, it should be Upgrade instead (as Upgrade my account is too long)...
Can I cleanly achieve that in CSS (not by adding both version and having one display: none while the other one is displayed ...) ?
I tried
#media(max-width: 990px) {
.navbar-btn {
content: 'Upgrade'
}
}
but it won't work...
Thanks
Use a span and show/hide it according to the screen size:
HTML
<button class='navbar-btn'>
Upgrade<span> my Account</span>
</button>
CSS:
#media(max-width: 990px) {
.navbar-btn span {
display:none;
}
}
JSFiddle
Say your html is in the following
<div class="navbar">
<span>Upgrade my account</span>
</div>
Your media query can be
#media(max-width: 990px) {
.navbar:before {
content: 'Upgrade'
}
.navbar > span {display:none;}
}
Example
See
Fiddle
The content property only applies to the :before and :after psuedo elements, it also means you'll be putting content (the text) in your CSS..which I wouldnt tend to recommend..
HTML
<div class='navbar-btn'></div>
CSS
.navbar-btn {
position:relative;
}
.navbar-btn:after {
position:absolute;
left:0;
content:'Upgrade my Account';
}
#media(max-width: 990px) {
.navbar-btn:after {
content:'Upgrade';
}
}
I would suggest something along the way i did in this demo
CSS:
#media(min-width: 990px) {
.navbar-btn:after {
content: ' account'
}
}
HTML:
<button class='navbar-btn'>Upgrade</button>
hey guys, m building a web-page in that theres a tag which holds some documentary data, so i want to print that specific data and not the whole page i.e banner, textfeilds etc... since i know window.print() function prints the whole page, but how to print a sepicific area in a page.
You can use a print style sheet, which sets the display property on everything except what you want printed to none.
You can load different stylesheets for different media using the media attribute.
style.css:
#header
{
background-color: #ccc;
font-size: 2em;
height: 4em;
clear: both;
}
print.css:
#header
{
display: none;
}
yourpage.aspx:
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
</head>
<body>
<div id="header">My Site!</div>
<div id="content">
Only print me
</div>
</body>
You can't print a specific area of a page, but you can hide the rest of the page when printing. Create a CSS that hides the element that you don't want to print:
#media print {
.someelement, .otherelement, .morelement { display: none; }
}
This is how we can print specific part(s) of webpage.
It also includes how to implement css and javascript in the printout page.
Also for multiple part of pages, you can apply "< br >" tag as I implemented below.
<script type="text/javascript">
function printCommission() {
// For logo html (part 1 for print out)
var prtContent = document.getElementById("logo");
// This is the div I was required to include in print out (part 2 for print out)
var prtContent1 = document.getElementById("dashboardbody1");
var WinPrint = window.open('', '', 'letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
// To apply css
WinPrint.document.write("<style> .commission td, .commission th {border-color: #CCCCCC;padding: 4px;} .commission th {background-color: #106C9B;border-color: #CCCCCC;color: #FFFFFF;} .commission { border-collapse: collapse; color: #000000; text-align: center; } .commission td.td-noborder { border: 1px solid #FFFFFF;} .bg-grey { background: none repeat scroll 0 0 #CCCCCC;} .bold { font-weight: bold !important;}</style>");
WinPrint.document.write(prtContent.innerHTML + "<br><br>" + prtContent1.innerHTML);
// to apply javascript (I used it to hide buttons)
WinPrint.document.write("<script type='text/javascript'>" + " window.onload=function(){ document.getElementById('downloadReport').style.display='none'; document.getElementById('printout').style.display='none'; document.getElementById('imgCommission').style.display='none';}; <" + "/" + "script>");
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
return false;
}