CODEWITHSUNDEEP
javascripthtmlcsszooming
FoobarisMaximus
FoobarisMaximus

Reputation: 1129

JavaScript/HTML/CSS: Zooming

Let's say I've got a page with a div, and a button. When you click the button, the div should be zoomed in on. In other words, if that div was 100px, when you zoom, it should then become, say, 200px. And all the children of this div should also be doubled in size.

What's the best way to do this?

My understanding is that there's a CSS zoom, but only in IE--it's not part of any CSS standard.

Upvotes: 0

Views: 8718

Answers (3)

SystemX
SystemX

Reputation: 539

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: 1

thirtydot
thirtydot

Reputation: 228142

You should use CSS3's transform: scale().

See: http://jsfiddle.net/Favaw/ - (I used jQuery for convenience, but it's not a requirement)

.zoomedIn2x {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);

    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

If you need to support older versions of IE than 9, then generate .zoomedIn2x using this tool:

If you want to do this more dynamically (such as other levels of zoom), then instead use cssSandpaper.

Upvotes: 10

mVChr
mVChr

Reputation: 50167

You might want to look into the jQuery plugin Zoomooz: http://janne.aukia.com/zoomooz/

Upvotes: 1

Related Questions