Forum Moderators: open
Works great when MSIE is set to show text at "medium" size (or from the "normal" size, with Firefox), but it looks like absolute cr*p when the settings are changed to something larger or smaller.
Is there any JS indicator I can grab/observe when the user either changes the size of the text they view or when they already have it set to something other than medium/default?
Y'know ... when they have used or use the View menu and modify the Text Size ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function findSize(){
if(document.body.currentStyle){
var sz=document.body.currentStyle.fontSize;
}else{
var vw=document.defaultView;
var cs=vw.getComputedStyle(document.body,'');
var sz=cs.getPropertyValue('font-size');
}
alert(sz);
}
</script>
</head>
<body>
<a href="#" onclick="findSize();">show size</a>
</body>
</html>
Note that different browsers return values in different units.
I knew it would be you or Mr. Marx, in the end.
marek, I believe "em" refers to the size of a capital "M" in the chosen font, and as such is a "font" unit, not a "distance" unit. Similarly, "pt" should refer to font-size points (font, often translated for use as a screen unit), "px" should refer to screen pixel units (distance, usually translated by the browser for font use), "in" should refer to screen pixel units extrapolated to the Standard (American) unit system, and "cm" should refer to screen pixel units extrapolated to the Standard Metric unit system.
<edit>I must applaud the thought! (I meant to add something like that during the original posting ... = :o) </edit>
I stand ready for correction, however that's what 20 years of typesetting has infused in me. :)
[edited by: StupidScript at 3:14 am (utc) on Feb. 5, 2005]
Oh, and I'll leave that, ". . . in the end." bit to Mr. Marx.
<edit>Hmm ... getting "document.body has no properties" using FF-1.0 on RH9. I'll test it again when I get back to a Windows system at work, and try the "em" suggestion in the meantime.</edit>
My Xan/Win box is down (upgrades, thankfully, not repairs) so I can't speak for Linux-tic fringe. Wouldn't be a bit surprised if Konq/Safari is finicky, too.
I remember we had a thread on this a good while back. The subject was "Can we tell when the user has changed the font size". It involved having an invisible text container and measuring its offsetWidth. Mine used a timer running in the background, and Rambo's test was triggered by document.mouseover. Then we argued bitterly about whether or not it is possible to change the browser text setting without firing a mouseover.
function findFont(){
if(document.body.currentStyle){
var ff=document.body.currentStyle.fontFamily;
}else{
var vw=document.defaultView;
var cs=vw.getComputedStyle(document.body,'');
var ff=cs.getPropertyValue('font-family');
}
alert(ff);
}
<html>
<style>
body {font-family: "tribble sans serif"}
</style>
</head>
<body>
Here is some text.
<script>
alert(document.body.currentStyle.fontFamily)
</script>
</body>
</html>
If the purpose is to see whether or not a particular font is installed, then we've failed.
- or am I losing the plot?
I put up my test at the domain in my profile /expandingmenu.html, if you want to see it.
Now to figure out how to integrate it with the Exponent content management system ...
Onward! :)
The most forgiving variant is the transitional HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Be sure to use the whole thing; sometimes you will see the abbreviated form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
but without the DTD URL, you're back to quirks mode.
<edit>Annnnnd irritatingly, when I include the DTD's URL in the declaration, it breaks the code, dagnabbit! I'll work on it more ... </edit>
<edit>Ok, it's better ... absolute positioning for MSIE and relative for FF ... I'm still working on being able to include the URL in the DTD without breaking the style instructions on FF/Win/Lin. The page validates both as HTML 4.01 Transitional and as CSS, but there's clearly an issue with FF. Maybe I need to bump it up to "strict", and use CSS more ...?</edit>
Works pretty well on Win MSIE and FF, and acceptable on Lin FF (bottom padding should be able to be a fixed quantity, i.e. 3px) ... it renders, but doesn't expand with Konqueror on Linux. Nor do the fonts render, so I'm not too concerned ... I'll make the menu links jump to the section homepage for Konqueror.
I'm still trying to figure out why it breaks when I reference the standard 4.01 Transitional DTD URL ... any ideas why the style or script breaks when that's included in the DTD? You can save it to your hdd and un-comment the URL in the DTD to test it ... ;)
(BTW: I use Konqueror ... I appreciate Konqueror ... but I figger Konqueror users are cut from a different cloth, and can handle a slightly-less-functional menu. :)
Mr. Tribble's solution in Message #3 successfully picks up the font size according to the user's browser settings.
It needs an event, like a click or a load to fire it after the BODY element has initialized, but ... by golly, that's just fine.
Please PM me if you want to comment on the expanding menu code.
