I have a page with a top navigation area, a side navigation area, a control button area and somewhere in the middle a DIV with an id="content" that contains content.
I would like to be able to print just the contents of that DIV. I realize I have many lines of code making my other areas invisible and resizing everything but is there some alternative? Is there some way I can just print the contents of the DIV?
Take a look at using Media Types - specifically #media print - in your CSS to specify styling that only applies to printing.
This way, you can write a stylesheet that hides everything except your "area inside a DIV".
Use a css print stylesheet putting display:none in the fields that you don't want to print.
Use the tag link like this:
link rel="stylesheet" type="text/css" media="print" href="print.css"
OR
#media print {
BODY { font-size: 10pt }
}
Related
I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}
I will at my forum-system when I'm opening a new site that the scrollbar is at the bottom of the site, so that I don't have to scroll down. I have no ideas how to make a code for this, because I'm not the pro in JavaScript..
One way is to place a bookmark at the bottom of the page. Example:
<a id="bottom"></a>
When you open the page, include the bookmark as hash. Example:
show
You can use css to complete the task:
Use this code in css
<style type="text/css"> body{overflow-x:hidden;} *{ overflow-x:hidden;} html, div, span, p, label, textarea{ overflow-x:hidden; } </style>
You don't need to use JavaScript to hide bottom scrollbar in the html page
I have an online viewer(popup) where Images are displayed in a div, along with some buttons to zoom in/out or rotate the image. Now I want to print the image programatically on certain user action. Is there any option to print just the from the browser or to print from a stream. I can't install extra plugins on the browser to accomplish this. If not printing an image directly, can I somehow print the image if I convert it into pdf before printing? I have tried finding a solution for this but the only thing I could find was javascript's window.print() function.The problem is that it will print the entire page including the buttons if I use it. I just want to print the image.
You can use the media print option to set contents of the body to hidden and only the image you want to print to show. Add a wrapper to contents in the body and append the image you want to print out side the wrapper with class print and add the following css.
<style type="text/css" >
.content-wrapper{
display:block;
}
.print{
display:none;
}
</style>
<style type="text/css" media="print" >
.content-wrapper{
display:none;
}
.print{
display:block;
}
</style>
I have a webpage with dynamically populated tables. They are wide, so they have horizontal scroll bars when being displayed on the page.
My problem is that when I go to print, the tables are cut off by a little bit. As a solution, I want to reformat the tables by changing the contents of some <td> elements to make it fit, for example:
//before
2014-01-23T18:28:35
//after
2014-01-23
18:28:35
This will decrease the width of the table so that it will fit on one page when printing.
I have two ideas so far:
When I dynamically populate the table, also populate a second table with the modified data. When on screen, the original table will be displayed, while the second one will be hidden. When printing, the original table will be hidden, and the second one will be displayed.
Call a JavaScript function or use CSS to modify the contents of <td> elements only while printing. (Is this even possible?)
What is the best approach for this situation?
EDIT
I am not asking about using a CSS stylesheet only when printing. I have already done that, and shrunk the font size to the minimum size (in my opinion) for human readability.
You can use a stylesheet for print.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
The styles defined there are only displayed when you are printing the page.
There is a #media print thing you can add to your css to change the styling of how things print.
So if you just want to shrink some td's you can do this for example:
#media print {
td {width: 50px}
}
Here, here and here are good examples of how you can do this. It's very powerful stuff, you can change just about anything to make the printing look completely different.
You can add this to your existing css file or make a completely new file that just has your printing css in it. Most people go for that second option, so all that css is together in the same place. If you do that you have to add media=print to your css link:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT AFTER QUESTION CLARIFICATION:
You could do a minified version of your option number 1.
Instead of making two complete tables and hiding one, put divs into each td that needs two types of data. Hide one for the screen css and then switch which one you are hiding in your print css.
This seems like less overhead than a completely different table.
So something like this:
<td>
<div class='screenShow'>Show this on the screen</div>
<div class='printShow'>Show this when I print</div>
</td>
Then the css would be:
#media screen {
screenShow {display: block}
printShow {display: none}
}
#media print {
screenShow {display: none}
printShow {display: block}
}
or something other than block, whatever makes it look right.
I ended up going with the solution in #Bobo's comment.
In each <td>, I put both options of text in <span> elements.
<td><span id="hideOnPrint">SCREEN_TEXT</span><span id="hideOnScreen">PRINT_TEXT</span></td>
In the screen.css, I only hid the id="hideOnScreen".
In the print.css, I only hid the id="hideOnPrint".
I have a Drupal website and I need to create a link to a different version of the same page that opens up in a new window but hides all the side bars, blocks and header and just shows the main content. This is so people can print the main content of the page without all the extra bits.
I know I can add in a link to a print version like print version. But then I want to add a new CSS class to the page which I could use to hide the extra bits. I am not sure how I can add the CSS class to the link/page.
I guess I could also use Javascript but not sure about which method to use for this.
Try the Drupal Print module, it provides customization for printing pages in Drupal.
If the Drupal Print module doesn't work for you (for some reason), the standard method for creating a print view utilizing CSS is to include in your primary stylesheet the following:
#media print {
/* style sheet for print goes here */
}
You would redefine the classes, elements, etc inside that stanza to change or suppress them for printing.
Good luck!
You do not need to create a new print-only page.
Instead, you can just add something like the following to the bottom of your stylesheet and the user will print the page without the extras.
#media print {
body {background-image:none; background-color:#fff;} //turns off bg images
//sets bg to white
div#header, div#footer, div#nav {display:none;} //hides elements
//change to match your divs etc.
h1, h2, h3, h4, h5, ul, ol, div, p, a {color:black;} //changes text to black
}