JavaScript/HTML/CSS: Zooming

Question

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 sho

Answer 1

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:

• http://www.useragentman.com/IETransformsTranslator/index.html

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

Answer 2

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

Answer 3

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>