I have a table made in html/css that need to be printed on a 40.5cm x 21.5cm page, and I can't force, from css/html, to get printed on that size. I have this:
html, body {
width:40.5cm;
height:21.5cm;
margin:0cm;
padding:0cm;
}
#page
{
width: 40.5cm;
height: 21.5cm;
margin:0;
}
#media print {
html, body {
width: 405mm;
height: 215mm;
}
}
But every time I put print and "print to PDF", the PDF is created in "letter" page size. I tried to actually print it, and it appears on that size too. What I'm missing? I also tried #page size instead of #page width and height.
You can't override the print settings using css, the only solution for you it is create a pdf.
you can use https://parall.ax/products/jspdf and set the size using this:
open the website and change this: var doc = new jsPDF(); for this:
new jsPDF('p', 'mm', [405, 215]);
and you can print your custom
Related
I want to implement pretty print using jquery and html. if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page. here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
enter image description here
I noticed that in CSS print there is a property called page-break-inside that prevent split element in multiple pages. so i use this and everything just works.
#media print {
.section {
display: block;
page-break-inside: avoid;
}
}
No need to JQuery
For instance if I have a gallery of images that I can browse through, sometimes having multiple galleries open, I have to be careful in resizing one window because it will resize differently for another one of the same page.
The best example I can think of is when you open an image by itself in a new tab and it's auto resized proportionally in the middle of the page no matter big or small the window is. No scrolling required
If it helps here's an example of the code code where the image is shown
<div id="i3">
<a onclick="return load_image(2, 'f46ef2b433')" href="https://testsite.com/b/f46ef2b433/1341428-2">
<img id="img" src="http://testsite.com/fold01/5dde3b620790893d3ffab2da2437077dd41b31cf-230842-1280-1820-jpg/keystamp=1550591100-88d6d61f5f;fileindex=66272627;xres=2400/_000.jpg"
style="height: 1820px; width: 1280px; max-width: 1280px; max-height: 1820px;" onerror="this.onerror=null; nl('27617-430719')"></a></div>
the xpath is: //*[#id="img"]
I've seen plugins do this with videos but I'm looking to just do it with an image. Looking at other "similar" examples is confusing me more than helping at this point
(function() {
'use strict';
var x;
x = document.getElementById("img");
x.style.maxHeight = "100vh";
x.style.maxWidth = "100vw";
x.style.width = "";
x.style.height = "";
x.style.position = "fixed";
x.style.top = "0";
x.style.left = "15%";
})();
Here is my current updated script. i've been unable to change the max-height and max-with values but everything else has worked out for the most part. Without that, I'm not able to finish the task unless there's another method
x.setAttribute("style", "max-Height: 100vh");
this works but wiped away all of the other attributes...
both seem to work only in the console and not in the script as far as modifying the max height and max width values. there's no problem with changing other values
From what you described, you can use vh and vw units. Those units are relative to the size of the viewport.
Try the following exemple in a empty page. The display: body on the image avoid to have a vertical scrollbar
html,
body {
margin: 0;
padding: 0;
}
img {
display: block;
max-height: 100vh;
max-width: 100vw;
}
<a href="https://stackoverflow.com">
<img src="http://www.dummyimage.com/1000x4000/000/fff&text=1000x4000">
</a>
I have a table in the code to print, which looks like this:
When I tried to print the table, it's print format looks like this:
I need to change the font size of the text in the print view, and also alter the column size in the print view. Also, if I can remove the border in the print view of the web table.
I have used javascript for printing the table. I have made use of the table ID.
<script type="text/javascript">
function PrintPage()
{
var TableToPrint = document.getElementById('thisIDisforprinting2');
newWin = window.open("");
newWin.document.write(TableToPrint.outerHTML);
newWin.print();
newWin.close();
}
</script>
you can add a css tag using document.write and style the table as you want using the "print" media query.
function PrintPage() {
var TableToPrint = document.getElementById('thisIDisforprinting2');
newWin = window.open("");
newWin.document.write(TableToPrint.outerHTML);
newWin.document.write('<style type="text/css"> #media print { #thisIDisforprinting2 { font-size: 24px; } }</style>');
newWin.print();
newWin.close();
}
Below a version that set the heigh of the columns and remove the borders
newWin.document.write('<style type="text/css"> #media print { #thisIDisforprinting2 { font-size: 24px; border: none; } #thisIDisforprinting2 td { height: 150px; border: none; } } </style>');
It looks like your Web page may use a width that exceeds the width limits for a printed page. You could try printing the page using the horizontal layout.
I have an img for a large screen and another for small screens.This is an easy option and if works but I am not sure if there it is a good practice to put the same img in different sizes in the html and hide one with display none? is there any other problem with that option?
CSS:
#small {
display:none;
}
#media screen and (max-width: 630px) {
#big { display:none; }
#small { display:block; }
}
HTML:
<img id="big" src="img/1-big.jpg">
<img id="small" src="img/1-small.jpg">
IMUO I think this is not a good practice, because you are loading all the images twice (and hidden then). If you are using bootstrap (or responsive page) you could use the class img-responsive or this:
img {
width: 100%;
height: auto;
}
Or if not, you could do this:
/* For width smaller than 400px: */
body {
background-image: url('1-big.jpg');
}
/* For width 400px and larger: */
#media only screen and (min-width: 400px) {
body {
background-image: url('1-small.jpg');
}
}
Doing that way, you only load the image when needed and avoid load twice the images. Another example as background image: https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/
I don't see anything wrong with this. In fact, it is a recognised technique to reduce page load times and to keep page sizes down on mobile (providing, of course, that you only load whichever image is required for your device size).
Also note, as the only potential pitfall I can see with this, is that that simply setting the CSS property to display: none does not always prevent an image from loading (see here: Does "display:none" prevent an image from loading?)
An alternative to this would be to have images stored with the same name and a small or no suffix (for larger images) added to them (almost like you have in your example), except only have 1 html element on the screen at any one time and modify the paths using javascript. Example;
// HTML ELEMENT
<img class='thumbnail' src='img/thumb.png'>
// JAVASCRIPT
if(window.innerWidth < 640){
// This is for users with smaller screens, load the smaller image
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
var current = imgs[i].getAttribute('src');
imgs[i].setAttribute('src', current + '-small.png');
// THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png'
// AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT
}
}
Any idea to make an element in the page full screen?
For example,a div or an img?
With "full screen" I mean that it should take all the space of user's screen,just like when we watch a video with the full screen model. I do not want the task bar/menu bar of the browser window display.
Any idea?
div.fullscreen{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width:100%;
height:100%;
background-color:red
}
I have tried the above code,however it is not what I want,it juse take all the space of the browser's content area rather than the user's computer'screen.
HTML elements can't break out of the bounds of the browser document window. The menu and tool bar are outside of the document window (which is a child of the browser window), so you can't "reach" them.
I think the only solution is to trigger full screen mode with JavaScript.
This answer shows how you can do that: How to make the window full screen with Javascript (stretching all over the screen)
There is a relatively new fullscreen JavaScript api which can make an element full screen.
It has to be called as the result of user input to prevent possible abuse, but it's relatively straight-forward to use:
Code from MDN article:
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
This is not possible now, and it will probably never be.
Just imagine what would happen if every website you visit had free reign to take over your desktop.
In order to do this, you can use the screen.availWidth and screen.availHeight properties to get the screen size. Next, set the element size to their corresponding properties in js.