CODEWITHSUNDEEP
javascriptcssinternet-explorer-6
124697
124697

Reputation: 21893

How can I implement a zoom function like the browser's CTRL +

I want a button that zoom in (increase font size is the main objective but images and tables etc is also wanted)

Upvotes: 4

Views: 8833

Answers (4)

Qwertiy
Qwertiy

Reputation: 21450

Following code zoomes the page to fit it to 1024px = 100% if available space is smaller. If there is enough space, the page is shown as is.

https://jsfiddle.net/xgqw5bjo/3/

Note, that the version with setting style via jQuery doesn't work as jQuery handles prefixes itself, but in this solution I need to control every one of them.

~function () {
  var $window = $(window), $body = $("body");
  var ie = document.documentMode;
  
  function updateSizes() {
    var width = $window.width(), scale = Math.min(width / 1024, 1);

    var style = $body[0].style;
    
    style.msZoom = ie === 8 || ie === 9 ? scale : 1;
    style.zoom = ie === 10 || ie === 11 ? 1 : scale;
    style.mozTransform = "scale(" + scale + ")";
    style.oTransform = "scale(" + scale + ")";
    style.transform = "scale(" + scale + ")";
  }

  $window.resize(updateSizes);
  updateSizes();
}();
html {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  transform-origin: top left;
}

@supports (transform: scale(1)) {
  body {
    -ms-zoom: 1 !important;
    zoom: 1 !important;
  }
}

div {
  width: 1024px;
  height: 128px;
  background: url(//i.sstatic.net/eMSCb.png) repeat-x;
  background: repeating-linear-gradient(to right, blue, red 256px);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Theoretically it should work in the following way:

  • IE 5.5 - 7 zoom

  • IE 8 - 9 -ms-zoom

  • IE 10 - 11 transform & ie

  • Edge 12+ transform & @supports

  • Opera 11.5 - 12.0 -o-transform

  • Opera 12.1 transform

  • Firefox 3.5 - 15 -moz-transform

  • Firefox 16 - 21 transform

  • Firefox 22 - 125 transform (has @supports, but hasn't zoom)

  • Firefox 126+ transform & @supports (has zoom, but it doesn't matter)

  • Safari 4 - 8 zoom

  • Safari 9+ transform & @supports (appeared at the same time)

  • Chrome 4 - 27 zoom

  • Chrome 28 - 35 zoom (has @supports, but hasn't transform yet)

  • Chrome 36+ transform & @supports

If I add -webkit-transform, it start work in Safari 3.1 - 3.2, but will brake a lot of others.

Actually for modern browsers result is made by using transform and disgarding zoom. All modern alive browsers (Edge, Firefox, Safari, Chrome) are already having transform & @supports and conform to standards, so the code won't be broken in future.

Tested the code in:

  • IE 11
  • Edge 15
  • Opera 12.18
  • Firefox 50, 132
  • Safari 5 (Win)
  • Safari 10, 17 (Mac)
  • Chrome 54, 58, 130

Details about browsers support:

Translation of my answer on ruSO.

Upvotes: 2

ChrisR
ChrisR

Reputation: 14467

There is the zoom css3 property which does exactly this, the latest webkit browsers (chrome, safari) support it.

edit: apparently even IE6 supports it in some way, check comments below

setting the zoom css property on your body or container should to the trick. Could be as simple as $('body').css('zoom', '200%'); with jQuery.

Check http://jsfiddle.net/Ks6Yn/1/ for an example

Upvotes: 6

Jose Faeti
Jose Faeti

Reputation: 12304

Approach 1

You need to set a variable storing your zoom amount.

When you apply a zoom-in or zoom-out, change this variable accordingly and change the size of each element on your page, both width and height for elements displayed as block, and font size.

Approach 2

Have different stylesheet, load the needed one at the moment the zoom value change.

Approach 3

Change only the class relative to the zoom-level to the elements and have a CSS rule for each class of zoom.

Anyway, what you are trying to do looks wrong to me.

Upvotes: 0

user908378
user908378

Reputation:

A working concept is to use JavaScript/jQuery to load a overwriting CSS style on click eg. a style with increased sizes of everything to overwrite the base one.

Upvotes: 0

Related Questions