I am making about 20 pages of a website all with a PDF in the middle and some ads on the sides. When someone prints the page I want the PDF to print, but not the ads on the sides. Is there a way to do this?
This image shows what I am trying to accomplish:
You can add specific styles for printing media.
#media print {
.my-advertisments {
display:none !important;
}
}
The rules inside the #media block will be used whenever you're trying to print the page.
You can have custom CSS for print, so you can simply set the display to none on print:
#media print {
#something {
display:none;
}
}
Related
I have this to hide the headers in every page of my #media print:
.layout-topbar {
display:none;
}
However I need to show the header in only the first page of every print, haven't been able to find the way.
I'm trying to hide the page URL while showing the page number
I found some possible solutions on other questions, but none of them helped me.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
The code above was supposed to hide the page URL, i guess.
You can go to print options and you can hide from there, like Firefox.
Print -> Page Setup -> Margin & Header/Footer -> Headers & Footers. Set it to '--blank--'.
Is not possible in Chrome and with css because is not a part of the html page.
And that code remove the urls only from the html page.
İn a classic application When the end user enters the page, we try to give all the CSS belonging to the page. However, end user only interested in with visible part of the page. We load CSS components belongs to visible page size,but non-visible part as well.
How i can make it possible load CSS components when needed?
For example: When end user scrolls down,then load required CSS components.
Thanks.
You can do this by the #media query.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This way you can do this with all screen sizes
You can read more about this at:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have a .NET (vb) page that is rendered using 2 master pages and a few user controls.
My users now want a "print" button.
Is there a way to strip the main content out of the page, and re-render without all the master page and user control content?
Thanks
You could use CSS to hide elements on the page when printing. There would be no need for a round trip to the server then.
#media screen
{
div.header {...}
}
#media print
{
div.header {display:none;}
}
#media screen, print
{
...
}
You could create a different masterpage then change to your 'alternate' stripped master which could include a print stylesheet.
There are some code samples at http://ipona.com/samples/ ( Bottom of the page links to a Skydrive folder at https://skydrive.live.com/?cid=635c8e2bf4822d7c&id=635C8E2BF4822D7C!498 )
I need to remove classes from different elements within the #media print on my CSS and add those classes on the #media screen.
Is there anyway to remove classes from the CSS file?
Something like:
#media print{
.element{/*Remove class*/}
}
#media screen{
.element{/*Add class*/}
}
I need to remove ui-tabs-hide added by a jQuery function (which hides the element in a weird way, as its not display:block or display:none) class from those elements at the time of printing and putting it back when finished printing.
No. CSS can't modify the DOM, only its presentation.
CSS can't take out elements from the HTML document, however you could try something like:
#media print{
element.relevantclass
{
display: none;
}
This would tell the printed media to not display this element.
you can use jQuery to do this.
$(<element>).removeClass() // or removeClass(<the class to be removed>)
$(<element>).addClass(<new class>)
if you want to do this on loading of the page, you can include this in the document ready function (as shown below)
$( document ).ready(function() {
$(<element>).removeClass()
$(<element>).addClass(<new class>)
});