CODEWITHSUNDEEP
jquerycss
user736893
user736893

Reputation:

css zoom will decrement but not increment properly

I'm using the following function to zoom a div. It works fairly well when you zoom out (scroll down), but when you zoom in (scroll up) the currentZoom jumps to 10 instead of 1.1. From that point you can zoom out but you cannot zoom in again (I'm assuming CSS zoom is limited).

What am I missing?

$('#workArea').on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();
    var currentZoom = $(this).css('zoom');
    alert(currentZoom);
    if (e.originalEvent.wheelDelta > 0) {
        currentZoom += .1;
        $(this).animate({ 'zoom': currentZoom }, 400);
    } else {
        currentZoom -= .1;
        $(this).animate({ 'zoom': currentZoom }, 400);
    }
});

Credit to event.wheelDelta returns undefined for the mousewheel code

Upvotes: 0

Views: 278

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

All CSS properties are returned as strings. This means that currentZoom += .1 will result in 10.1. I would guess that you are correct, and that CSS zoom is limited to a fixed range. Zooming in should work again when you return to a zoom level of 1.

To fix the problem, try currentZoom = parseFloat($(this).css("zoom")); or
currentZoom = +$(this).css("zoom")

Upvotes: 3

Related Questions