CODEWITHSUNDEEP
javascriptcssfunctionbrowserzooming
titi
titi

Reputation: 91

Zoom body browser

I would add my site buttons A + and A-to zoom. I wish that all the body is grossise So I created this code

<html>
<body>
    <style>
    .container{width: 800px;background: #000;}
    p{color:#fff;}
    a { color: #FFCC00;}
    </style>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
<script type="text/javascript">
function ZoomScreen100() {
document.body.style.zoom="100%"
 }
function ZoomScreen200() {
document.body.style.zoom="200%"
 } 
function ZoomScreen300() {
document.body.style.zoom="300%"
}
function ZoomScreen400() {
document.body.style.zoom="400%"
document.body.style.zoom="400%"
}
</script>
<a href="#" onclick="ZoomScreen100()">A+</a>
<a href="#" onclick="ZoomScreen200()">A+</a>
<a href="#" onclick="ZoomScreen300()">A+</a>
<a href="#" onclick="ZoomScreen400()">A+</a>
</body>

It works on Chrome, Internet Explorer, Safari but not on Firefox and Opera. Why?

Upvotes: 3

Views: 31662

Answers (3)

SystemX
SystemX

Reputation: 539

https://stackoverflow.com/a/64473943/3534015

best solution is using zoom: 50%

i made this example with javascript, you can test it and change it as you like

var zoomediv = document.getElementById('zoomediv')

var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
  zoomediv.style.zoom = '125%'
})

var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
  zoomediv.style.zoom = '75%'
})
div {
  background: #f0f0f0;
  
  border: 1px solid #e0e0e0;
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  padding: 0 3rem;
}
<div id="zoomediv">
  <h1>
    Title
  </h1>
  <p>
    this is a paragraph
  </p>
</div>

<button id="zoomin">
  <h1>
    +
  </h1>
</button>

<button id="zoomout">
  <h1>
    -
  </h1>
</button>

Upvotes: 2

Pavlo
Pavlo

Reputation: 44947

zoom is a non-standard property that has not been implemented by Firefox, the closest cross-browser property is transform (demo):

document.body.style.transform = 'scale(2)';

The effect, however, will be different from applying zoom: parent context (e.g. width, height) will not be updated. If that's your intent, you may want to consider using calc() and a multiplier on selected properties:

document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;

Upvotes: 6

user1329482
user1329482

Reputation: 569

Have a look at http://www.browsersupport.net/CSS/zoom. I wasn't able to make it work (generally) in Firefox or Opera, and the most straightforward explanation is that those browsers haven't implemented support for it. (Firefox 23.0.1 passed one of the tests at the linked site; Opera 12.16 passed neither.)

It's not what you wrote--it's that the browsers you mention aren't ready for it yet. (Not surprising--even though you'll find site that tell you zoom is in the spec, I can't find it listed anywhere in the actual w3c documents. Maybe after more caffeine....)

That being said, remember that a compliant page will have a element and that's where the styles go. I assume this was a quick dash-off and you forgot the head element. :)

Upvotes: 1

Related Questions