{"id":63483,"date":"2007-12-01T00:56:00","date_gmt":"2007-12-01T00:56:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/12\/01\/hey-scripting-guy-how-can-i-change-the-font-size-of-a-span-in-an-hta\/"},"modified":"2007-12-01T00:56:00","modified_gmt":"2007-12-01T00:56:00","slug":"hey-scripting-guy-how-can-i-change-the-font-size-of-a-span-in-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/hey-scripting-guy-how-can-i-change-the-font-size-of-a-span-in-an-hta\/","title":{"rendered":"Hey, Scripting Guy! How Can I Change the Font Size of a Span in an HTA?"},"content":{"rendered":"

\"Hey, <\/H2>\n

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<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, OA. You know, one of the missions of the Hey, Scripting Guy!<\/I> column is to bring script writers \u2013 and system administrators \u2013 the information they most desperately need. Therefore, we\u2019re 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\u2019s the answer: 1,663.<\/P>\n

We hope that clears up any confusion that has surrounded this important issue. If you have any further questions, just drop us a line.<\/P>\n

Some of you might be wondering how we even know<\/I> the number of steps needed to get from Building 42 to Building 2. Well, for one thing, if it\u2019s 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<\/I> 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.<\/P>\n

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: \u201c15, 29, 105, 22, 38, 81.\u201d When the Scripting Guy who writes this column could not be deterred she finally gave up, reasoning, \u201cYou\u2019ve never listened to me before, so why should you suddenly start listening to me now?\u201d<\/P>\n

Or at least she said something like that. We weren\u2019t really paying that much attention.<\/P>\n

At any rate, the Scripting Guys ended up taking nearly 8,000 steps in order to get to the meeting and back. That\u2019s 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<\/I> find out how many steps it takes to get from Building 42 to Building 2.<\/P>\n

Speaking of which, how many steps are required to programmatically change the font size of a span? We have no idea. But we do<\/I> know that this can be done using code similar to this:<\/P>

<script language=”VBScript”>\n    Sub ToggleFontSize\n        If DataArea.Style.fontSize = “14pt” Then\n            DataArea.Style.fontSize = “8pt”\n        Else\n            DataArea.Style.fontSize = “14pt”\n        End If\n    End Sub\n<\/script><\/p>\n
<body>\n    <input type=”button” value=”Toggle Font Size” onClick=”ToggleFontSize”><p>\n    <span id = “DataArea” style=”font-size:8pt”>This is the data in my span.<\/span>\n<\/body>\n<\/PRE>\n
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:<\/P>\n\n\n\n\n
\u2022<\/TD>\n\n
A span (a named section of the HTA) with the ID<\/B> \u201cDataArea\u201d. 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”<\/B>. 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.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
A button labeled Toggle Font Size<\/B>. Each time this button is clicked, we\u2019ll run a subroutine named ToggleFontSize (more on that subroutine in just a second).<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
When we first fire up our HTA, it looks like this:<\/P>\"HTA\" \n

It\u2019s no surprise that some people would find the default font to be a little small.<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. If you can\u2019t even see<\/I> the default font, well, then you know exactly what we mean.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
So what are we going to do about that? Well, we\u2019ll tell you what we\u2019re going to do about that; we\u2019re going to run the subroutine ToggleFontSize:<\/P>
Sub ToggleFontSize\n    If DataArea.Style.fontSize = “14pt” Then\n        DataArea.Style.fontSize = “8pt”\n    Else\n        DataArea.Style.fontSize = “14pt”\n    End If\nEnd Sub\n<\/PRE>\n
Again, this isn\u2019t particularly complicated. In the first line of the subroutine we\u2019re simply checking to see if the fontSize<\/B> property of our span\u2019s Style<\/B> object is equal to 14 points (14pt):<\/P>
If DataArea.Style.fontSize = “14pt” Then\n<\/PRE>\n
If the font size is<\/I> 14 points, that means we\u2019re 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\u2019s a feat that requires just one line of code:<\/P>
DataArea.Style.fontSize = “8pt”\n<\/PRE>\n
Ah, but what if the font size isn\u2019t<\/I> 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:<\/P>
DataArea.Style.fontSize = “14pt”\n<\/PRE>\n
The net result? The first time we click the button the font size increases, and our HTA looks like this:<\/P>\"HTA\" \n

Pretty cool, huh? Click the button a second time and we\u2019ll revert to the smaller font. Click the button a third time and we\u2019ll switch back to the larger font. Etc., etc., etc.<\/P>\n
Needless to say, we aren\u2019t 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\u2019t have time today to show you how to do that; after all, we still have several thousand steps to take.<\/P>\n
Oh, what the heck; after all, we did<\/I> do a lot of walking around trying to find the conference room in Building 2. Here you go:<\/P>
<script language=”VBScript”>\n    Sub ChangeFontSize\n        DataArea.Style.fontSize = DropDown1.Value\n    End Sub\n<\/script><\/p>\n
<body>\n    <select size=”1″ name=”DropDown1″ onChange=”ChangeFontSize”>\n        <option value=”8pt”>8 point<\/option>\n        <option value=”10pt”>10 point<\/option>\n        <option value=”14pt”>14 point<\/option>\n        <option value=”18pt”>18 point<\/option>\n        <option value=”24pt”>24 point<\/option>\n    <\/select><p>\n    <span id = “DataArea” style=”font-size:8pt”>This is the data in my span.<\/span>\n<\/body>\n<\/PRE>\n
We won\u2019t discuss the dropdown list in any detail today; if you\u2019d like to know more about this control take a look at our HTA tutorial<\/B><\/A>. 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<\/B> of each of these options:<\/P>
<option value=”18pt”>18 point<\/option>\n<\/PRE>\n
Each time the user selects a new option (that is, each time the onChange<\/B> 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:<\/P>
DataArea.Style.fontSize = DropDown1.Value\n<\/PRE>\n
That\u2019s all there is to it.<\/P>\n
In case you\u2019re wondering (and we know you are), it\u2019s 14 steps from the Scripting Editor\u2019s desk to the desk of the Scripting Guy who writes this column. (Well, approximately. Because he can\u2019t get past the three-headed dog guarding her office, the Scripting Guy who writes this column has never actually been to the Scripting Editor\u2019s 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!<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. So does<\/I> the Scripting Editor go to the bathroom 75 times a day? No. In fact, she\u2019s such a dedicated Microsoft employee that she never<\/I> goes to the bathroom on company time. Amazing but true!<\/P><\/TD><\/TR><\/TBODY><\/TABLE><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-63483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=63483"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63483\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=63483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=63483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=63483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}