0

I use the $(window).resize(function()) to get changes in window size, and acoording to those I want to zoom in and zoom out. Why zooming?!, because I have a lot of dynamically appended divs with absolute coordinate and I want those divs to keep the allignment when window is changed.Basically what one would get, if pressed 'Ctrl' + '-'.

Let's say I have this image

enter image description here

If I use .css to add the following line, which zooms out '-moz-transform': 'scale(0.8)' I get an image like this

enter image description here

But if I use Ctrl + - instead I get

enter image description here

As you see the second image has some coordinates messed up(not changed). Has anyone any idea on why that is, or another function I could use to zoom out?

Here is a jsfiddle to play yourself http://jsfiddle.net/rnhev60f/8/

EDIT:: After the responses, I gave up on the idea. Instead I created a function to calculate the percentage of the changes (newSize / originalSize) and used the percentage to change the position and size of every object in order to avoid all backdoors and bugs. It's a bit more comlicated and ended up with a LOC-wise longer function, but works for me for now. Thanks for the responses tho!

user4065758
  • 309
  • 3
  • 12
  • 2
    This is a bad idea as the zoom is an accessibility feature of the browser and meant to be independent of site styles. It's also probably impossible for this reason: http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level – DonutReply Jul 24 '15 at 11:51

1 Answers1

1

You need to scale both the body and the span

Demo

http://jsfiddle.net/tdov936x/

Code

$('body,span').css({'transform': 'scale(' + currentZoom + ')'});

Result

enter image description here

Consider adding transform-origin: 0% 0%; as 2D transformations can change the x- and y-axis of an element

Tasos
  • 5,321
  • 1
  • 15
  • 26