Develop Reference

How to set zoom on a element using Javascript on Firefox?

I can change a page element on Chrome using zoom
document.getElementById("pane-side").style.zoom = 0.5
Looks like Firefox did not support zoom, when i run the same code nothing happens.
Im searching for how to use zoom on Firefox, and i got this code:
document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"
But the result was not what I expected:
Im trying to zoom out the element like on Chrome, any advice?
-EDIT-
The element I'm trying to zoom in is from the page web.whatsapp.com, the panel where show some contacts when you type something in the search (like on the chrome photo).

I hope you are not using this CSS property for a website in production,
the property zoom is a non-standard CSS property, originated from IE, unofficially proposed in May 2015 by Rossen Atanassov working at Microsoft.
It is unsafe to use since it will not work for every browser (and in my humble opinion, probably not going to be implemented). Unfortunately, this CSS property is not implemented in the Firefox Browser hence you are experiencing this issue.
I see that you already tried to use transform: scale(); instead,
and the difference in your screenshot is due to the fact zoom affects the layout size of the elements, while transform: scale(); does not.
You could try with the CSS at-rule #viewport, but keep in mind that this one was deprecated too (in 2020, here are the details: https://github.com/w3c/csswg-drafts/issues/4766) and probably doesn't work in Firefox either.
In your CSS file:
#viewport {
zoom: 1
}
A zoom factor of 1 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
That being said, you could also try to set bigger the font size of the target element (to have a zoomed-in effect).
If this is not enough, you could try to find a good balance between those properties.
I'll do the CSS example that might scale up all the font sizes:
body {
transform: scale(1.5);
font-size: 150%; // or any other value that is bigger than the computed value
padding: 20%; // optional spacing if some text is not visible because of the transform scale
}

zoom is not supported by FireFox.
Solutions below should work as you expect, only adjust numbers for your needs:
document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";
Or CSS version:
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
Or eventually <style> element added with JS:
var style = document.createElement('style');
style.innerHTML = `
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
`;
document.head.appendChild(style);

Does this works for you?
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;

Both -moz-transform and transform should be supported in FF.
It could be because of the differences between zoom and scale.
zoom is applied pre-render and changes the layout sizing of the element.
transform is applied post-render and doesn't change the layout sizing
The easiest way to see this is with a div sized relative to a fixed element.
On zoom, everything inside the div will zoom in/out, but the div stays the same
On scale, everything 'zooms' in/out, including the div

You Can Use CSS Variables Try this
document.getElementById("pane-side").style.setProperty('--zoom', '0.5');
*{
transform: scale(var(--zoom));
}
<h1 id="pane-side" >Firefox</h1>

here's my javascript to resize iframe and need some edit

Here's my iframe it's inside a div with button
function myFunction() {
var url =document.getElementById("myFrame").getAttribute("src");
var newUrl = url.substring(0,url.indexOf("width")) + "width=320&height=270";
document.getElementById("myFrame").setAttribute("src",newUrl);
document.getElementById("myFrame").setAttribute("style","border:none;overflow:hidden;width:320px;height:270px;");
}
<div style="width:auto;height:auto;" id="mydiv">
<iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe>
</div>
<button onclick="myFunction()">Change Size</button>
What I need here is my code works it will change the size of iframe and its src link is size. But as you see, my div with id of "mydiv" has style width and height is auto. What I need my code also to be 100% full width on width and height when I make window larger that div is size increase but iframe doesn't change because it has fixed size.
I have tried
("style","border:none;overflow:hidden;width:100%;height:100%;")
("width")) + "width=100%&height=100%"
but it doesn't work correctly. Either iframe is messed up, but doesn't work right. Hope you understand I really need help in this.

If we're talking about pure JavaScript, the below example should work fine.
// Select your button
var button = document.getElementById("button");
// Button event listener for click
button.addEventListener("click", myFunction);
// Button function
function myFunction() {
document.getElementById("myFrame").style.cssText = 'width: 600px !important; height: 600px !important;';
}
I've tested the code on JSFiddle. Check it out.
I think you were focusing within the iFrame too much. You have to focus on things you can work with. In this case, trying to modify the url attribute won't do anything because that isn't what controls the iframe width and height.
The element controls the appearance of itself. So you must use CSS or attributes provided with the iFrame. In this case I choose to go with CSS via JavaScript.
I didn't provide a jQuery or 3rd party solution because the user specified JavaScript and it looked like he or she has not implemented any of it throughout the code.
But to entertain the thought, here is a jQuery solution:
$('#button').click(function () {
$('#myFrame').css("cssText", "width: 600px !important; height: 600px !important;");
});
A much cleaner approach!

** EDIT **
It turns out I did completely misunderstand the question. You wish the content of the IFrame to fill the IFrame? I don't think you can do what you want.
If you need to resize the content inside an IFrame:
Edit the CSS of the page inside the IFrame.
If the IFrame content has the same domain name as your parent, then you can access its DOM using javascript, and manipulate.
Neither of these work for your code example though.
I've played around with some CSS3 in the snippet which makes the content look larger. Maybe something like this could help?
<!DOCTYPE html>
<html>
<head>
<style>
html, body { width: 100%; height: 100%; padding:0; margin:0; }
#div {
width: 600px;
height: 600px;
padding: 0;
}
#iframe {
width: 480px;
height: 480px;
border: 1px solid black;
transform: scale(1.25);
transform-origin: 0 0;
/* browser compatibility */
-webkit-transform: scale(1.25);
-webkit-transform-origin: 0 0;
-moz-transform: scale(1.25);
-moz-transform-origin: 0 0;
-o-transform: scale(1.25);
-o-transform-origin: 0 0;
-ms-zoom: 1.25;
}
</style>
</head>
<body>
<div id="div">
<iframe id="iframe" src="http://domain.com/page.php"></iframe><br />
</div>
<!-- uncomment to view the original size of the content inside the iframe -->
<!--
<iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="600" width="600"></iframe>
-->
</body>
</html>

Handle iframe sizing depending on the content is often complicated, I'd recommend using a 3rd party solution like https://davidjbradshaw.github.io/iframe-resizer/ (I'm not related to it, but I've used it several times, no issues at all).
You can give a try and see if that suits your needs.
Hope this helps

CSS - max-height doesn't work for printing image

I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/

The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;

Make elements move horizontally only when window shrinks

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!

#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}

It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}

If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}

How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?

I am currently using IE9 and media queries and I have no need to have this working from other browsers.
I tried using a set of rules like:
#page {
size: auto;
margin: 10mm 10mm 10mm 10mm;
}
//... rules to match the millimiters of all the A formats (A0, A1, A2, etc) including margins and tolerance
/* A4 210x297 mm */
#media print and (min-height: 266mm) and (max-height: 288mm) and
(min-width: 179mm) and (max-width: 201mm) {
.img_port {
height: 267mm !important;
}
}
// ...
it seems to be working but it is not reliable because the size height and the width values passed to the CSS seems to depend on the printer even if the A4 format is always selected.
What I want to ask is if there is any other possible way to obtain the same result (fitting the image on one page according to the paper size).
Thank you in advance.

The long and short of printing in IE is that you will never be able to accurately control things like this.
Physically, printers have different capabilities when it comes to how much of the page is printable area. Then, you also have to deal with any settings that IE remembers from the last page the user printed such as zoom, margins, pages-per-page, etc.
After struggling with this for years, I have finally given up attempting control of what IE does with print pages and started treating my print stylesheets more like suggestions.
IE < 9 simply does not support page-break or #page in any meaningful way and, in my testing IE9 simply ignores almost all #page rules in favor of whatever settings the user last configured.
To suggest that IE print an image at the full width and full height of the page try the answer Landscape printing from HTML

Sounds like this might be a job for page-break:
.img_port {
height: 267mm !important; /* might also try height: 100%; */
page-break-after: always;
page-break-before: always;
page-break-inside: avoid;
}

You could always do this:
Create a new CSS file that holds only the CSS you want applied when printing.
*{display: hidden;}
img{display: block; width: 100%; height: 100%;}
Then you can link to it in your html doc:
<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />
I'm not 100% on the "display: block;", you may need to try to play around with other values for "block". I have not tested this, but if you do, let me know if it works!

There isn't any reliable way of doing so AFAIK.
We let the user choose the page size/orientation and generate a PDF of the right size containing the image. Actually you can generate a hi-res (bigger) picture to get better printing DPI and fit it to the page.

If you use pagebreak it will show a empty page.
img{
page-break-inside: avoid;
padding:0; margin:0;
top:0; left:0; right:0;bottom:0; border:0;
/*width:2480px; height:3508px!important;*/ /*a4 size */
width:100%; height:100%; max-width:100% important!
}
.page-break { display: block; page-break-before: always; }
#page {
size: landscape;
}
#page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}