Javascript FontSize.onChange event
Some time ago, I’ve wrote a post about equal height divs, and, as I’ve already said there, that script has some problems, and one of them occurs when an user changes the font size in his browser (CTRL and + or CTRL and mouse scroll - read the original entry for more info on this matter).
In a comment to that article, Răzvan Brateş pointed me to this topic on the mootools forum. Although I’m not a big fan of MooTools, the idea was pretty cool: to check every second if a div changed size and assume that it happend because the text in that div changed size. And I’ve decided to make some improvements to that script, as well as porting it to use the prototype library. First of all, if the font changes size, it doesn’t mean that its container will follow. If the div is large enough to accommodate the new font size, the event will not be fired. And the other way around is also true. If a div changes size, it doesn’t necessarily mean that the text inside it changed font size.
The FontSize.onChange event
So I’ve tried a different approach, that monitors for actual changes in font size of the <html> element. Feel free to browse the code here. Basically, all you have to do is add a handler for the FontSize.onChange event, like so:
FontSize.onChange = function( oldSize, newSize ) {
alert( 'Old size: ' + oldSize + ' New size: ' + newSize );
}
And everything should work fine! Here’s an example! For more information on how it works, just look in the source code!
Almost forgot, use FontSize.stopListener() to stop the script and FontSize.startListener() to start it again!
Browser compatibility
In Opera and IE 7, you don’t need such a script, because when the user magnifies the text, the browser uses a vectorial magnification of the whole page (text, images, etc.), like a zooming effect. So, the font size never changes, you’re just looking at it through a magnifying glass, thus making this script useless.
That leaves just three other popular browsers - Firefox, IE 6 and Safari. I’ve tested it in all of these and it works. Due to my non-existent Mac, I’ve used the Windows version of Safari, so I can give any guaranties that the script will work on the MacOS version of Safari.
