Detect Zoom in Firefox - javascript

I want to detect if the browser is zoomed in or out (don't really care to know the value, but I assume it will need to be found anyway in the decision process). I have read a lot of other SO posts on the topic, but none of the solutions given work on FF (although there is an IE7/8 and chrome solution).
Oh, and I can't use flash, so the flash solution is out of the question.
Edit: And I must be able to detect this on the initial page load

With modern versions of FireFox, you can now do the following:
DPR = window.devicePixelRatio;
if ( DPR <= 0.999 || DPR >= 1.001 ){
// User has zoomed in or zoomed out
}

If by zoom you mean that the user pressed ctrl/cmd+[plus] and not css transformation you can detect computed font-size. Just checked in FF 4.0.1/Mac and it worked for me. To detect computed font-size I used code from this question: Get computed font size for DOM element in JS .
The value changed after zooming. You need to know what the font-size of a certain element should be (as set in css) and compare it with what it really is.

I suggest you look at this generic question. And possibly close your own as a duplicate (not voting to do this myself, since it's not "an exact dup".

Did you try to detect the resolution, which may help you to detect the zoom.

Maybe instead of detecting the zoom you could detect the error.
For example if your layout expects an elements' offset to be at 100,200 and a query shows it's at 300,450 you'll know it's in the wrong place and you can apply your fixup/workaround.
This has the added benefit that if the zoom issue is fixed in a future version of the browser you won't be applying your fix needlessly or incorrectly.

Related

JVectorMap Scroll Speed and Full screen Issue

I am using JVectorMap to create a map Page on my Website. However I found that the scrolling zoom speed is much to slow. How do I adjust the scroll speed? There is no documentation for this issue. I found this:
zoomStep: 1.6,
This is however to specify the zoom step for the buttons, not the scrolling.
Another issue that I have found is that I cannot set the height of the Map Container to:
window.innerHeight;
But i can however set the width to:
window.innerWidth;
How can I specify to Height of the Map container to be in relation to the Window size? I've also tried using a % value.
Thank you
this might be quite late answer, even might have been already answered somewhere.
But i got the same problem with mouse scroll speed and found the solution.
It can be fixed in js file in line 2382
zoomStep = Math.pow(1.003, event.deltaY);
You can easily change speed by changing that "1.003" value. More you make it - faster the scroll is.
I didnt fully understand the second problem of yours. But if it is about container height, I just use % values for the height. Make sure your parent has some height value as well.
Re. the scroll speed I agree that it is far too slow in 2.0.1.
I had a look into the js file and found some comments on line 234 - " If this is an older event and the delta is divisable by 120, then we are assuming that the browser is treating this as an older mouse wheel event and that we should divide the deltas by 40 to try and get a more usable deltaFactor. Side note, this actually impacts the reported scroll distance in older browsers and can cause scrolling to be slower than native. Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
On line 113 you will find the adjustOldDeltas set as true. I have set it as false but no change in the scroll speed.
Hopefully this works for you or gives you enough to explore the issue further.
W.

Emulating css zoom in IE8 - any jQuery libraries, polyfill, anything?

I'm picking up where another SO user's question went unresolved a few years ago: IE8 doesn't zoom content when applying a CSS zoom value to a DIV
Here's the example: http://jsbin.com/exicel
and here's how it looks under IE8 and Chrome after pressing 'Zoom Out':
Clearly Chrome scales everything to fit as appropriate. IE8 isn't a cool enough kid to do so, apparently.
Any decent workarounds for this? I'm playing around with zooming on the parent in IE8, but that's causing other issues in my layout.
I've tried:
Wrapping the target element in a "zoomWrapper" element which becomes the actual target. This works kind of OK, but IE8 doesn't resize the zoomWrappers box model causing a lot of odd element placement issues when things wrap on the page.
Using jQuery .scale() and .animate() -- scale seemed like it was a good idea, but I wasn't able to actually illict results similiar to a zoom effect. Animate isn't really that useful.
Scaling using DXImageTransform:
$('.rackContentWrapper').css({
'filter': 'progid:DXImageTransform.Microsoft.Matrix(M11=' + zoomValue + ', M12=0, M21=0, M22=' + zoomValue + ', SizingMethod="auto expand")',
});
This completely slaughters text while having the same issues as just scaling with CSS zoom.
So... this has to be doable, right? Maybe there is a library out there to handle this?
It is not possible. Several people have tried but they all fail to work in IE8:
Zoomooz
JSImpress
Zui53
Presenter.js
These and many others have tried and failed to make a cross platform zooming library
Some people have been successful at getting ms-zoom css property working, see: How can I scale the content of an iframe?

Updating IE7's element-layout

I've been working on a complex web-application and have tested it with 'normal Browsers' and ie >= 8. Now I need to get it to work in IE7 wich, of course, is a mess. I'm getting lots of troubles that when you play with an elements style, especially with positioning, IE7 has a lot of rendering bugs.
To be specific, I'm using Script.aculo.us' "BlindDown"-effect, which updates top- and left-values of an element in a nice animation. After the animations done the element suddenly disappears and I found out it's set to left: 1649px even though its left-value is set to something 'normal'.
This is a bug in IE7. I found out if you set zoom:1 on that element its layout gets updated and the element will be rendered properly again, at its proper position. But what you have to do if zoom is already set to 1 is to set it to zoom:2 and zoom:1 again so the element will actually get updated.
This is madness. However you can't do much about this. But I'm getting tired of the rather hacky zoom:2->zoom:1 thing so I'm asking if there is a way to update an element's layout without something stupid like that zoom:2/1-thing. Maybe there's a function or a more clever way to do this. If you have an idea, anything's appreciated.

Issue with detecting viewport resizing

I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.
I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.
That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?
I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?
window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize
However, you should be able to get full-height elements using only CSS, and then you won't need any javascript
Maybe you can solve this problem with Media Queries and window.matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

What is the best way to make a zoom event automatically trigger a resize event?

I have some resize code, but it does not seem to get triggered for a zoom event. I have had zoom code trigger resize code before, and know a little bit about situations that cause a zoom event to trigger a resize, however I would like to get more explanation.
What is the best way to force a zoom event Ctrl++ or Ctrl+- to cause a onresize call?
You won't like the answer. I suggest you don't do this. There is no native way to detect it, as in window.onzoom or anything like that. You would have to set up an interval timer and continually do DOM testing of box sizes compared to font sizes. And newer browsers zoom differently than older browsers. IE6 just increases the font size while FF3.5 increases the size of the page and re-wraps to to fit.
The recommendation is to allow the browser to act as intended and set up your CSS styles appropriately with EM tags for sizes.
Sorry guys, I have a solution I like better than either of yours. Basically, make a wrapper div arround all you html source.
<div style="height:100%;width:100%" onresize="youResizeCode()"></div>
It works great for me. I am basically using it for FF3 and IE8, I am not sure which browsers will work with this.
Grae

Categories