Is there a way to specify text to appear on the bottom and header of every page when printed?
or
Is there a CSS solution which would allow a header and footer to repeat on each printed page?
thank you
Although your question is a bit too general, I'm assuming you want that specific text to appear only on your print page and not in your website. Just do a
<p class="print-this">TEXT TO BE SHOWN IN PRINT</p>
then in your print.css
.print-this {
display: block;
}
and in your main.css
.print-this {
display: none;
}
Oh and you need to include your stylesheet with the media option as Giu said:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
Using position:fixed, should render on every page when used in a print context
http://css-discuss.incutio.com/wiki/Printing_Headers
Related
i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
I cant seem to find a way to exclude my layout in express. I tried doing
response.render("index",{layout: false});
but that disables the css for the page. Is there something im missing here? What is the best way to disable the layout but keep the css?
Also, I'm using app.use(express.static("public")); and my css is in the public folder.
This is happening because your layout is including the CSS. Try instead making a layout that just has the code to include your css and nothing else. Like so:
/* Using handlebars templateing for this example */
<link rel="stylesheet" type="text/css" href="styles.css" />
{{{ body }}}
This will just include the css and then display your content.
<link rel="stylesheet" type="text/css" href="styles.css" /> is the code to include your css
{{{ body }}} is the code to include your content.
However it is not possible to include css without a layout unless it is in your content.
So if you want to use {layout: false} the css inclusion code(<link rel="stylesheet" type="text/css" href="styles.css" />) has to be in your content
I am working on a page which has a print view so when the user clicks on "Print" a new window pops up and I want to add a .css file just for that window.
Thanks
When including your stylesheet, use this:
<link rel="stylesheet" media="print" href="stylesheet.css" />
You can add a print only style sheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet does not need to be "added" to popup windows. It will be ignored when the user is in the "normal" view and then only applied when the user goes to print the document.
If you want to be both visible and apply to the printed document, just have it cascade.
<link rel="stylesheet" type="text/css" href="normal.css" /> #normal styling
<link rel="stylesheet" type="text/css" href="print.css" /> #override normal styling
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> #override normal, for printer
That way you get the best of both worlds. Override the css rules in normal.css with new rules in print.css, as needed to make the document look as you wish. The new document will visually look different and then also print out differently.
EDIT: Removed due to clarification. New answer:
Open the URL in a new window as such: blah.aspx?print=true
Then on your backend:
//Assuming you use .NET...
if(Request.Querystring("print").toLower() == "true" ) { //Convert to bool type if you are so inclined
printCSS.Visible = True;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="..." visible="false" runat="server" id="printCSS" />
</head>
You could also use one of the jQuery methods shown to load it in using jQuery too.
$(document).ready(function () {
$(".print").click(function () {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/ecsPrint.css"
});
return false;
});
});
Unless this is a Internal Web Application, i wouldnt recommend loading css with JS.
I have a page where there is a lot of text, probably 15 pages, I wan't to be able to add a header at the begining of every page when the user prints the document.
Is this possible with CSS or JavaScript/jQuery????
You can use classic CSS by targeting media using media attribute.
Example:
<link rel="stylesheet" type="text/css" media="all" href="all.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Add your <header></header> in your page, position it with CSS, if you don't want it to be included in a browser do:
header {
display: none;
}
in your all.css
And in your print.css:
header {
display: block;
}
Print layouts change depending on the browser, default fonts installed, and any other custom settings used. How would you know where the page divisions are?
Your best bet may be to produce a PDF of your documentation.
I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.
I have the regular external css for the page inbetween the head tags
And when the user click on the print link . it loads the print css .
<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>
var format = getUrlParam('format');
if (format == 'print') {
$('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
}
But,in IE it load the standard css instead of the print.css.
How do can this be fixed for IE6?
Thanks
You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:
<link href="/theme/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/theme/screen.css" rel="stylesheet" type="text/css" media="screen" />
No need to go through the javascript trickery.
As for IE6 - it does support this, as can be seen on the comparison list on this page.
Try removing the <link> to the other css file when you append the print.css
try with document.write,
document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');