How can i adjust the font size of the text when i'm gonna print it ? i tried to put font size property but it's no used when i'm gonna click the print button , it will just go back to the default font size.
function print1(strid)
{
var values = document.getElementById(strid);
var printing =window.open("");
printing.document.write(values.innerHTML);
printing.document.close();
printing.focus();
printing.print();
printing.close();
}
<div id="print2">
Ex : My data table 1
</div>
<input type="button" value="Print" onclick="return print1('print2')">
You can use a CSS media query. In a style section add something like the following to increase the font size for the entire body. You can use any other CSS selector instead of body, so for just your div use #print2.
<style type="text/css">
#media print {
body {
font-size: large;
}
}
</style>
Add that to your HTML document after the <head> tag.
Of course you can set any other CSS properties in the block.
Here's a complete example:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
}
#media print {
body {
font-size: 48pt;
}
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
This is a sample document with normal size text that should print large.
</body>
</html>
Related
I'm trying to create a website of about five pages for a project using HTML, CSS, and Javascript.
I've created a font family button using all three languages.
The role of this button is to change the font family of the entire website when the button is pressed.
It's not working, and nothing happens when I press the font button on my website.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
<p>Example text</p>
Try out this. Button needs to be given a font-family: inherit style to inherit it's style from it's parent (which is body) instead of taking a style from user style sheet.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif !important;
}
button{
font-family: inherit;
}
<button type="button" onclick="fontfamily()">Font</button>
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
!!! hello world !!!
lorem elum ipsum ....
you need to add some text and its working ???
I am using the following css to hide printing header and footer which is working fine in chrome but not still print in IE.
<!DOCTYPE html>
<html>
<head>
<title>Print Test</title>
<style type="text/css" media="print">
#page :footer {color: #fff }
#page :header {color: #fff}
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
Still page name and page count printing in header and page link and date printing in footer while printing through IE browser. Any specific code which can be used to hide while printing through IE browser. Kindly help in this.
I'm making an invoice in HTML & CSS. The goal is that after filling in, the invoice gets printed. But for some reason it doesn't print the CSS color of text. All text is black.
All other CSS styling works, like font-family, font-size, font-weight ...
This is the original in HTML & CSS :
And this is what is printed :
The printing is done with js: window.print();
Does anyone know why CSS color isn't working?
EDIT:
the title is placed in a table with id 'factuur':
<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>
The title has this CSS:
#factuurTitel {
font-weight: bold;
font-size: 30px;
color: #194197;
text-align: center;
vertical-align: middle;
font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}
I have this #media print :
#media print {
body * {
visibility: hidden;
}
#factuur, #factuur * {
visibility: visible;
}
#page {
margin: 0;
}
}
I've tried adding #factuurTitel { color: #194197; } to the #media print.
Usually JS Print only handles html content alone if you want to give stylings to print, Use separate media query print in your css file:
#media print
{
/* your css goes here */
}
#factuur, #factuur * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
This works in webkit browsers and the latest firefox updates, otherwise there's no other known solution.
I had the same problem myself.
I am using a "find and replace" type javascript function, and replacing all the backticks in the HTML with <code> tags, and all the pound signs with </code> tags. For some reason my styles are not working unless I code them in on the JS file with the .css() method.
Ideally, the combo should output the code between backticks and pound signs as blocked <code> content, (the <code> tags are generated from JavaScript) with a soft gray background. However, for some reason the styles just don't show up.
If any one can help, I'd greatly appreciate it.
This is my html file test.html:
<!DOCTYPE html>
<head>
<title>Script Test</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="styles/code/style.css" type="text/css">
</head>
<body>
<p>This is some code:
`var p = 10; #
`var a = 5; #
`var x; #
`x = a * p; #
`console.log(x); #
All I want is for this to work!
</p>
<script src="codeStyle.js"></script>
</body>
My CSS file (compiled from SASS) style.css:
body {
color: #121212;
font-family: 'Helvetica Neue', serif;
font-weight: 300;
letter-spacing: .25px; }
body div.container {
padding: 10px; }
body div.container code.styled {
font-family: arial, serif;
background-color: #f9f9f9; /* soft gray bg color */
display: block; /* block display style */
margin: 2px 0 2px 2.5%;
padding: 3px;
width: auto;
background-color: #fafafa;
border: 1px solid #f5f5f5; }
/*# sourceMappingURL=style.css.map */
And my js file codeStyle.js:
$('p').each(function() {
var text = $(this).html(); // Grab HTML from each <p>
text = text.replace(/`/gi,"<code class='styled'>"); // Replaces every ` with <code>
text = text.replace(/#/gi,"</code>"); // Replaces every # with </code>
$(this).html(text); // Set <p> html as replaced code
});
To put Partick's answer up: Your CSS is trying to target an element that doesn't exist.
The problem is in this bit of CSS:
body div.container code.styled { }
There is no content that matches this selector, as there is no <div class="container">
To get around this, you can either remove the offending selector from the CSS:
body code.styled {}
or add the requied selector to your HTML:
<div class="container">
<p>Some text <code class="styled">some code</code>.</p>
</div>
Here's a Fiddle of it working.
I'm making a site with a lecture on. The lecture is divided into chapters. Each chapter has it's own link and when clicked a new video loads an external html get loaded into a text window. I need these links to stay active, so that ppl know what chapter they're on.
Here's my current html:
<li>chapter1</li>
<li>chapter2</li>
..and so on..
Now, this works perfectly.. As I said, I need the links to stay active, and tried adding an addClass(this)
I.E:
onclick="javascript:loadContent('#pres','chapter2.html');changeVideo('chapter2');addClass(this)">...
function addClass(obj)
{
obj.className="active";
}
This doesn't work. I've also tried removing everything but the addClass function with no luck.
Any ideas?
function clickChapter(type, page, chapter){
loadContent(type, page);
changeVideo(chapter);
removeAllClass();
addClass(ocument.getElementById('id_'+chapter));
}
function removeAllClass(){
var aAnchor = document.getElementsByTagName('A');
for(var i=0; i<aAnchor.length; i++){
aAnchor[i].className = '';
}
}
<li>chapter1</li>
<li>chapter2</li>
You could try this...
first create a Cascaded style sheet(CSS) and in it write the code like :
a:active {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:visited {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:link {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
then paste this code in the head of your html page:
<link type="text/css" href="<Path of the CSS>.css" rel="stylesheet"/>