Text Resize Event?

Forum Moderators: open

Message Too Old, No Replies

Text Resize Event?

Looking for a way to detect text resizing

loopjunkie

7:27 pm on Jun 9, 2005 (gmt 0)

I'm working on a fluid design idea that would keep the aesthetics of design intact when vision impared users resize the text.

I'm looking for a way to detect if/when a user resizes text in the browser. Does this trigger an event that I can listen for?

Thanks,
James

Rambo Tribble

4:35 am on Jun 10, 2005 (gmt 0)

I don't believe there is any event associated with resizing text through the browser menu options. Most browsers won't even register loss of focus from such an action. You can, however, poll for onmouseover, onmouseout, or onmousemove. Each event has its drawbacks in this case, but little seems to exist in terms of options.

Bear in mind, IE uses currentStyle while Mozilla uses getComputedStyle().getPropertyValue()

Moby_Dim

6:41 am on Jun 10, 2005 (gmt 0)

my humble idea - did you guess over scrollWidth property measurement and comparison?

loopjunkie

11:45 pm on Jun 10, 2005 (gmt 0)

Thanks for the suggestions. Here is what I came up with. There are two ways text can be resized, hotkeys and menu drop down. I register keystrokes and onmouseover with document. Anytime the user selects the text size from a drop down the mouseleaves the document, triggering the onmouseover when it returns to the page (at least in theory, this is a little clunky in IE). When keystrokes are entered I check to see if they are the hotkeys for resizing (in firefox - IE doesn't have hot keys. I haven't tested for other browsers). There is still certainly a lot of improvement to be made to this script. Please feel free to post suggestions.


<html>
<head>
<title>resize test</title>
<script language="javascript">
<!--// date: 6/10/05
// author: James Brennan
var referenceElementID = "text"; // reference element. Must contain some text.
var IE = (navigator.appName == 'Microsoft Internet Explorer')? true : false; //dumb browser check
var referenceElement,storeFontSize;
function init() { 
referenceElement = document.getElementById(referenceElementID);
//set initial font size for comparison
storeFontSize = (IE)? referenceElement.currentStyle.fontSize : window.getComputedStyle(referenceElement, null).fontSize ;
//register keystrokes and mouseover events
document.onkeyup = keyCheckFont;
document.onmouseover = windowCheckFont;
}
function keyCheckFont(e) {
// get the key code
var keyCode = e.which;
// these are the hotkeys for changing text size in firefox.
if((keyCode == '61' && e.ctrlKey) �� (keyCode == '109' && e.ctrlKey)) {
alert('fontSize changed');
}
}
// checks the font size of initElement and compares it to the value lastFontSize.
// if they are different it returns the current font size of initElement. 
// If they are the same it returns null.
function fontSizeChanged(storeFontSize,el) {
// get current font size
var curFontSize = (IE)? el.currentStyle.fontSize : getComputedStyle(el, null).fontSize;
// compare it to last font size 
if(storeFontSize == curFontSize) return null;
// if they are different return the new value
else return curFontSize;
}
function windowCheckFont(e) {
// compare current font size against last know font size
var tempFontSize = fontSizeChanged(storeFontSize,referenceElement);
// if it hasn't changed do nothing
if(tempFontSize == null) return null;
// if it has, change the known font size to the new size
storeFontSize = tempFontSize;
// and then trigger whatever else you desire
alert('font size changed');
}
-->
</script>
</head>
<body onLoad="init()">
<p id="text">This is some text</p></body>
</html>

[edited by: Woz at 12:14 am (utc) on June 24, 2005]
[edit reason] No emails please, see TOS#13 [/edit]

Moby_Dim

6:10 am on Jun 11, 2005 (gmt 0)

And I'd try to explore scrollWidth of a standart text string checked by timer loops.

loopjunkie

9:59 pm on Jun 14, 2005 (gmt 0)

Moby_Dim - what about the overhead involved in keeping a timing loop running in the background? In order to be resonably responsive to the text size change the loop would have to be running frequently, like once per second. My hunch is that this might cause performance problems. What do you think?

The approach I took was an attempt to keep the script dormant unless there is some reason to believe that the user might have resized the text.

Moby_Dim

8:45 am on Jun 18, 2005 (gmt 0)

Sorry, loopjunkie - I have not visited the page since the posting.

I do not think this could result in any serious memory consuming problem. I do not use timers frequently personally, but there are a lot of scripts which do use more frequent timers : 50 ms, 100ms, etc loops. (vs. once in 1000 ms in this case accordingly to you.)

In any case - every project should be tested before the final verdict ;).

ricfink

4:58 am on Jun 23, 2005 (gmt 0)

Cross-browser it can't be done.

Firefox and Opera, for two examples, use a pixel-based zoom to resize and there are no events built in to those browsers to detect it.

In IE there is no built-in ontextsize or ontextresize event either, but detecting a new selection in IE's Text Size menu can be done.

loopjunkie

5:19 pm on Jun 23, 2005 (gmt 0)

ricfink:

I've created a good solution for firefox (see the code above) How do you detect the menu selection in IE?

Thanks