I don’t normally write code that I’m not ready to use, but I made an exception for this jQuery plugin. It doesn’t really do all that I wanted it to do, but it’s good enough for a release.
Before I lose the ADD/ADHD folks: Demo.
The goal for this plugin was to create a event handler for text and page zooming in a browser window. While this can’t be accomplished entirely without some better event support in the browsers, I can watch for keyboard and mouse shortcuts that result in zooming.
This plugin itself doesn’t care if you zoomed in or out. It just runs the callback function when you zoom. Maybe at a later point, I’ll add that feature.
Without any further ado, here’s the plugin code:
jQuery(document).keydown(function(e){
switch (true) {
case jQuery.browser.mozilla || jQuery.browser.msie :
if (e.ctrlKey && (
e.which == 187 ||
e.which == 189 ||
e.which == 107 ||
e.which == 109 ||
e.which == 96 ||
e.which == 48
)) fn();
break;
case jQuery.browser.opera :
if (
e.which == 43 ||
e.which == 45 ||
e.which == 42 ||
(e.ctrlKey && e.which == 48)
) fn();
break;
case jQuery.browser.safari :
if (e.metaKey && (
e.charCode == 43 ||
e.charCode == 45
)) fn();
break;
}
return;
});
jQuery(document).bind('mousewheel', function(e){
if (e.ctrlKey) fn();
});
jQuery(document).bind('DOMMouseScroll', function(e){
if (e.ctrlKey) fn();
});
};
Because we’re dealing with browser implementations of keyboard shortcuts, I decided to use jQuery.browser (which uses navigator.useragent) to deal with the browsers individually. Much to my surprise (and delight), Internet Explorer and Firefox handle zooming identically.
Lines 2 – 30 deal with zooming through keyboard shortcuts. The character codes are as follows:
42: * (numpad)
43: + (numpad)
45: – (numpad)
48: 0 (numpad in FF and IE)
96: 0
107: + (numpad in FF and IE)
109: – (numpad in FF and IE)
187: +
189: -
Lines 32-38 deal with scrollwheel zooming in Firefox and IE. Opera doesn’t run the callback function for the scrollwheel when the CTRL key is pressed (which is how scrollwheel zooming is done in Opera). Safari 2 (which is what I have) doesn’t support scrollwheel zooming at all.
Further testing needs to be done in Safari 3, but this plugin works pretty well as is. Here’s how you’d use it:
alert('I zoomed');
});
Here’s the download and the demo.
Hey, this is a great idea for a plugin, but the demo doesn’t appear to work for me using a Mac and Firefox 3.0.x … perhaps it’s because the command for the Mac is the “command” key, not the “control” key?
@rob: I’ll take a look at that tomorrow. You’re right, it’s probably just the Apple key vs. CTRL key and it’s probably just a matter of changing e.ctrlKey in line 5 to (e.ctrlKey || e.metaKey).
Another thing I was thinking about was, what if the text is resized using the menus as opposed to the keyboard?
This old(er) ALA article discusses a scenario of adding hidden element and testing it’s size … food for thought.
http://www.alistapart.com/articles/fontresizing
@rob: Like I mentioned in the article, I can only watch for keyboard and mouse shortcuts, using my method anyway. I hadn’t thought about the method that ALA suggests. I’ll have to check it out. Maybe less browser-specific code…
This doesn’t on chrome either. It’s a pity there isn’t a way to do feature detection for this.
Here’s a plugin for detecting font-size changes that I published awhile ago. It doesn’t detect page zoom changes. It doesn’t rely on polling, like the ALA technique, but instead uses a mechanism developed by Hedger Wang:
http://tomdeater.com/jquery/onfontresize/
Thanks, I just looking for!
All my Br work.