disable the CTRL/Wheel zoom effect at runtime

Question

How do you disable the ctrl/wheel zoom effect with css or javascript on certain elements. I create a menu bar that gets distorted when the zoom effect is applied. I would like to disable it for just certain elements.

Sanitarium

This is an accessibility issue and you should try to work with it and not against it. This is why you should use the relative unit "em" for sizing css elements. Gmail is a great example of relative sizing. Go there and change the browser text size to be either larger or smaller. – Tambourin

Answer 1

Better idea: design your layout so that it's robust enough to handle changes like this. You can't disable them, even if you fix the font size (which you should never do in the first place), so you might as well respond to zooming gracefully.

The fact is, if all elements are scaled equally by the browser, your page should look and work exactly the same way as it did before (except, y'know, bigger) unless you took some lazy shortcuts in your design somewhere.

Brodench

"The fact is, if all elements are scaled equally by the browser..." I think he's having trouble with the font-only zooming that used to be dominant. Fortunately, that's on its way out... Unfortunately, it'll still be an issue for a few years yet. – Bezanson

That's fair. If there are functional parts of the page that need not be scaled with fonts (i.e. anything but content), it's OK by me to fix their size. But if he's using JS that relies on pixel-perfect positioning or anything along those lines, it's a lost cause. – Brodench

@Brodench The fact is browsers are known to be flawed: https://mcmap.net/q/1314931/-how-to-keep-elements-aligned-regardless-of-browser-zoom-ratio/632951 – Counterfactual

Answer 2

solution for IE and Firefox:

var obj=document.body;  // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)
{
    obj.addEventListener('DOMMouseScroll',mouseWheel,false);
    obj.addEventListener("mousewheel",mouseWheel,false);
}
else obj.onmousewheel=mouseWheel;

function mouseWheel(e)
{
    // disabling
    e=e?e:window.event;
    if(e.ctrlKey)
    {
        if(e.preventDefault) e.preventDefault();
        else e.returnValue=false;
        return false;
    }
}

Koeppel

FYI, this wont work in webkit browsers as the control key press overrieds the mousewheel event and is not detected. – Katzen

Answer 3

You can't; this is a browser feature, not a document feature.

Having said that, if you use CSS's style="font-size: 9px;", you can override text size. Browser zoom will still work, and browser font size changes will have some reformatting effects.

Hulburt

Answer 4

Here's my problem: I've always designed with ems, and they work magically. But with full-page zoom, my backgrounds are also zoomed in. If I have a repeating pattern as the main background, I don't want that to become pixelized. They do help us avoid some work, like implementing Doug Bowman's Sliding Doors of CSS, but now I have to live with blurry tabs.

I also have another problem with full-page zoom, at least as it's implemented in today's browsers: I'm one of 'those' people who set my browser to 12pt font instead of 16pt. Every once in a while, I'd come across a (fixed-width, of course) site that resizes the text to a tiny size (I'm guessing they used 0.9em or something, instead of 14px, while trying to make it smaller). I'd usually just zoom in a notch or two, and all would be well. With full-page zoom, though, the images scale badly and I have a horizontal scrollbar.

The solution to the first problem would be to allow some sort of processing instruction in the background-image tag to disallow full-page zoom on that element. Or maybe something in the document's head. If browsers really want to be fair about it, they could also give the users an option they could set that over-rides the no-zoom instruction, so they could zoom anyway if they so choose. The solution to the second problem would be for full-page zoom to convert all the px into em at a rate of 16px/em first, and then zoom down to your text size, instead of converting px to em using your text size as a base. Then scrolling back up to 16px would make the images perfectly-sized, as intended.

Spoilt