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 )
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.
İ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 am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
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;
}
}
I have an ASP.NET WebForms app. On a page of the app I have an image (implemented by DevExpess control AspxBinaryImage).
I have to add Print Image functionality on the page: a button Print that prints out the image (not the whole page)
How can I implement this?
Use CSS to define which parts of your webpage should be printed:
#media print {
#somediv {display: none}
}
Then you can implement a javascript:window.print() callback in your button that will cause the browser to only print the elements you want to be printed (i.e. your image).