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 li

Answer 1

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.

Answer 2

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.

Answer 3

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;
    }
}

Answer 4

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.