1

I'm using a php styleswitcher and alternate stylesheets to try to duplicate the function of browser zoom (keyboard cmd-plus or ctrl-plus).

Right now, the "zoom in" graphic is linked to an alternate stylesheet with the following css:

body {
zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0}
}

This works fine, but ideally I'd like to have the link trigger a relative zoom rather than an absolute zoom value -- so i would need to establish a variable that determined the user's current zoom level, and then increase that zoom by 120%. This way the same link could be clicked multiple times to increase the zoom incrementally.

Any idea how to do this?

MrJ
  • 1,880
  • 16
  • 29
rg_
  • 339
  • 1
  • 3
  • 15
  • See here http://stackoverflow.com/questions/2026294/zoom-css-javascript – LeeR Feb 12 '12 at 18:33
  • Removed PHP tag - more of a CSS question (and nothing above really relates to PHP) – MrJ Feb 12 '12 at 18:37
  • yes, I saw this thread, but it doesn't address my issue. i have set up my stylesheet as described in this linked thread, but i'mm trying to figure out how to get it to affect the cumulative zoom. as it's set up now, clicking the link will work only once -- once it's loaded the "zoom 1.2" stylesheet, it's zoomed 1.2x, and clicking it again does not increase the zoom. – rg_ Feb 12 '12 at 18:39

1 Answers1

0

I think this will need JavaScript.
If I remember it correctly, you can change/create CSS-styles with JS. So if you save a variable in JS and multiply it with 1.2 everytime the onClick of the link is triggered, it should create the same effect.

EDIT: I don't know if it's possible, but if you can multiply variables in LESS, you could that 'language'. As it's a combination of CSS & JS

BlueCacti
  • 8,169
  • 3
  • 18
  • 24
  • does anybody have any specific recommendations for how to do this? i don't know enough JS to write this myself. – rg_ Feb 12 '12 at 18:41
  • See [How to detect page zoom level in all modern browsers?](http://stackoverflow.com/a/5078596/938089?how-to-detect-page-zoom-level-in-all-modern-browsers) for the methods to detect the browsers zoom level. Then, divide the desired zoom level by the measured browser zoom. Finally, apply the changes to `document.body.style.zoom` (and `document.body.style["-moz-transform"]`, `document.body.style["-webkit-transform"]` to meet your wishes. – Rob W Feb 12 '12 at 19:00