Welcome to WebmasterWorld Guest from 54.145.58.37

Forum Moderators: open

Message Too Old, No Replies

Text Resize Event?

Looking for a way to detect text resizing

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

New User

10+ Year Member

joined:June 9, 2005
posts:4
votes: 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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 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()

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

Preferred Member

10+ Year Member

joined:Jan 4, 2003
posts:365
votes: 5


my humble idea - did you guess over scrollWidth property measurement and comparison?
11:45 pm on June 10, 2005 (gmt 0)

New User

10+ Year Member

joined:June 9, 2005
posts:4
votes: 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]

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

Preferred Member

10+ Year Member

joined:Jan 4, 2003
posts:365
votes: 5


And I'd try to explore scrollWidth of a standart text string checked by timer loops.
9:59 pm on June 14, 2005 (gmt 0)

New User

10+ Year Member

joined:June 9, 2005
posts:4
votes: 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.

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

Preferred Member

10+ Year Member

joined:Jan 4, 2003
posts:365
votes: 5


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 ;).

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

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 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.

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

New User

10+ Year Member

joined:June 9, 2005
posts:4
votes: 0


ricfink:

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

Thanks

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members