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.
A:
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.
tsilb
2009-02-12 18:07:00
+8
A:
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.
Welbog
2009-02-12 18:10:00
"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.
AaronSieb
2009-02-12 18:29:39
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.
Welbog
2009-02-12 18:35:45
+9
A:
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.
BC
2009-02-12 18:10:56
A:
- Force all your users to use Internet Explorer < 7
- Set all element sizes in pixels.
- Welcome to 2003.
No seriously, I'm a big fan of em based layouts, If you use a reset stylesheet, and set the body font size to 62.5% it works out to about 10px. This allows you to create 1em = 10px based grid system.
On a side note:
I've also made a 12px based grid system in the past, with 80em = 996px. It made a 3 column layout of 27ems wide cols (324px) with 2 x 12px margins, or a 4 column layout of 20 ems(240px), with 3 x 12px margins.
It also scaled beautifully.... Then came full page zoom, and all my work was for naught.
garrow
2009-02-13 08:05:21
A:
I know you can intercept the event with
<body onmousewheel="dosomething();">
as explained here :
but I don't know if it's compatible with all browsers.
RVeur23
2009-02-16 19:57:22
A:
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.