Hey, Scripting Guy! How Can I Change the Font Size of a Span in an HTA?
Hey, Scripting Guy! I have an HTA that displays data in a span. Depending on the size of their monitor, some of my users complain that the font size in that span is too small. How can I programmatically change the font size of a span?
— OA
Hey, OA. You know, one of the missions of the Hey, Scripting Guy! column is to bring script writers – and system administrators – the information they most desperately need. Therefore, we’re going to cut right to the chase today. You want to know how many steps you need to take in order to get from Building 42 to Building 2 on the Microsoft campus? Here’s the answer: 1,663.
We hope that clears up any confusion that has surrounded this important issue. If you have any further questions, just drop us a line.
Some of you might be wondering how we even know the number of steps needed to get from Building 42 to Building 2. Well, for one thing, if it’s useless information you can pretty much bet that the Scripting Guys will know it. For another, earlier today the Scripting Guy who writes this column heard that the average American takes 5,000 steps a day; doctors recommend that the average person take 10,000 steps a day. To be honest, even the 5,000-a-day figure sounded like an awful lot of steps, especially for Americans (people who would happily hitch a ride from the garage to their living room if such a service was available). That piqued the interest of the Scripting Guy who writes this column, who was curious as to how many steps he takes each day. Because the Scripting Guys had to go to a meeting in Building 2, he decided to count the number of steps along the way.
And yes, he managed to do this despite the best efforts of the Scripting Editor, who tried to distract him from counting by continually calling out random numbers: “15, 29, 105, 22, 38, 81.” When the Scripting Guy who writes this column could not be deterred she finally gave up, reasoning, “You’ve never listened to me before, so why should you suddenly start listening to me now?”
Or at least she said something like that. We weren’t really paying that much attention.
At any rate, the Scripting Guys ended up taking nearly 8,000 steps in order to get to the meeting and back. That’s 1,663 steps to get to Building 2, another 1,663 steps to get back, and about 4,500 steps spent wandering through Building 2. Why so much walking in Building 2? Well, in his zeal to count the number of steps between Buildings 2 and 42, the Scripting Guy who writes this column neglected to find out which room the meeting was in. So, yes, they almost missed the meeting. But they did find out how many steps it takes to get from Building 42 to Building 2.
Speaking of which, how many steps are required to programmatically change the font size of a span? We have no idea. But we do know that this can be done using code similar to this:
<script language=”VBScript”>
Sub ToggleFontSize
If DataArea.Style.fontSize = “14pt” Then
DataArea.Style.fontSize = “8pt”
Else
DataArea.Style.fontSize = “14pt”
End If
End Sub
</script>
<body>
<input type=”button” value=”Toggle Font Size” onClick=”ToggleFontSize”><p>
<span id = “DataArea” style=”font-size:8pt”>This is the data in my span.</span>
</body>
As you can see, we have a very simple little HTA here. How simple? Well, for one thing, the body of the HTA consists of just two elements:
| • |
A span (a named section of the HTA) with the ID “DataArea”. In addition to specifying an ID (a prerequisite for being able to manage the span using a subroutine), we also included the parameter style=”font-size:8pt”. As you probably already figured out, this sets the starting font size for our span (and all the text within that span) to 8 points. |
| • |
A button labeled Toggle Font Size. Each time this button is clicked, we’ll run a subroutine named ToggleFontSize (more on that subroutine in just a second). |
When we first fire up our HTA, it looks like this:
It’s no surprise that some people would find the default font to be a little small.
|
Note. If you can’t even see the default font, well, then you know exactly what we mean. |
So what are we going to do about that? Well, we’ll tell you what we’re going to do about that; we’re going to run the subroutine ToggleFontSize:
Sub ToggleFontSize
If DataArea.Style.fontSize = “14pt” Then
DataArea.Style.fontSize = “8pt”
Else
DataArea.Style.fontSize = “14pt”
End If
End Sub
Again, this isn’t particularly complicated. In the first line of the subroutine we’re simply checking to see if the fontSize property of our span’s Style object is equal to 14 points (14pt):
If DataArea.Style.fontSize = “14pt” Then
If the font size is 14 points, that means we’re currently using the larger font size. And because this is a toggle button (that is, clicking it makes the font large while clicking it a second time makes the font small) that means we need to switch to the 8-point font. That’s a feat that requires just one line of code:
DataArea.Style.fontSize = “8pt”
Ah, but what if the font size isn’t equal to 14pt? Well, in our sample script that means that the data is currently being displayed using the small font size; therefore, we need to employ this line of code to replace the 8-point font with the 14-point font:
DataArea.Style.fontSize = “14pt”
The net result? The first time we click the button the font size increases, and our HTA looks like this:
Pretty cool, huh? Click the button a second time and we’ll revert to the smaller font. Click the button a third time and we’ll switch back to the larger font. Etc., etc., etc.
Needless to say, we aren’t limited to toggling between two font sizes. Alternatively, we could use a dropdown list box that lists a range of font sizes, and the user could then select from any of those sizes. Of course, we don’t have time today to show you how to do that; after all, we still have several thousand steps to take.
Oh, what the heck; after all, we did do a lot of walking around trying to find the conference room in Building 2. Here you go:
<script language=”VBScript”>
Sub ChangeFontSize
DataArea.Style.fontSize = DropDown1.Value
End Sub
</script>
<body>
<select size=”1″ name=”DropDown1″ onChange=”ChangeFontSize”>
<option value=”8pt”>8 point</option>
<option value=”10pt”>10 point</option>
<option value=”14pt”>14 point</option>
<option value=”18pt”>18 point</option>
<option value=”24pt”>24 point</option>
</select><p>
<span id = “DataArea” style=”font-size:8pt”>This is the data in my span.</span>
</body>
We won’t discuss the dropdown list in any detail today; if you’d like to know more about this control take a look at our HTA tutorial. Suffice to say that we simply specify a number of options for our dropdown list, setting a font size (such as 18pt) as the Value of each of these options:
<option value=”18pt”>18 point</option>
Each time the user selects a new option (that is, each time the onChange event is fired), we run a subroutine named ChangeFontSize. That subroutine does just one thing; it sets the fontSize of the span to the value that was just selected in the dropdown list:
DataArea.Style.fontSize = DropDown1.Value
That’s all there is to it.
In case you’re wondering (and we know you are), it’s 14 steps from the Scripting Editor’s desk to the desk of the Scripting Guy who writes this column. (Well, approximately. Because he can’t get past the three-headed dog guarding her office, the Scripting Guy who writes this column has never actually been to the Scripting Editor’s desk.) It also takes approximately 134 steps for the Scripting Editor to get to the bathroom and back. That means that the Scripting Editor would only have to go to the bathroom (and back) 75 times a day in order to get in her 10,000 steps. Amazing but true!
|
Note. So does the Scripting Editor go to the bathroom 75 times a day? No. In fact, she’s such a dedicated Microsoft employee that she never goes to the bathroom on company time. Amazing but true! |
Light
Dark
0 comments