How Can I Dynamically Change the Background Color of an HTA?
Hey, Scripting Guy! How can I dynamically change the background color of an HTA?
— CN
Hey, CN. You know, last summer (Fourth of July, 2005) an errant firework shot by a neighbor accidentally caught one of the Scripting Guys’ garage on fire. (Because it was shot by a neighbor we assume it was an accident. Had it been shot by one of the other Scripting Guys, well ….) Although no one was hurt, the garage was totaled. Forced to rebuild said garage from scratch, the Scripting Family decided to turn it into a family room. (Admittedly, they don’t like having to park the Rolls Royce outside instead of in the garage. But hey, if the Rolls gets wet they’ll just buy a new one.)
We won’t bother recapping the saga of the Contractor Who Couldn’t Be Bothered to Contract; suffice to say that the job that would be done “in three weeks, guaranteed” took six months. After six months of lethargy, punctuated by an occasional hour or two of work, the very last thing that needed to be done was to paint the interior. “What color would you like us to paint it?” asked the contractor. “And remember, we have to paint everything the same; the insurance company will only pay for one color.”
“In that case we’ll take white,” replied the Scripting Guy.
“What shade of white?” asked the contractor.
“Um, I don’t know,” said the Scripting Guy. “Just plain old white. Any shade of white will be fine.”
A couple weeks later the Scripting Guy came home from work to discover that – miracle of miracles – the painter (Big Larry) had actually come out and painted the family room. That was the good news. The bad news: he painted the entire room – ceiling, walls, door frames, you name it – yellow.
Not being much of an artist, the Scripting Guy had had no idea that yellow was a shade of white. Which, apparently, it is.
The moral of the story: a color-changing script would have come in pretty handy right about then. Unfortunately, the Scripting Guy didn’t have a color-changing script that would work on a family room; all he had was a color-changing script that would work on an HTML Application (HTA):
<SCRIPT LANGUAGE=”VBScript”>
Sub TestSub
document.body.bgColor=”red”
End Sub
</SCRIPT>
<body>
<input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>
</body>
As you can see, there really isn’t much to this HTA. The user interface, such as it is, consists solely of a button labeled Run Script; when you click that button, it triggers a subroutine named TestSub:
<input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>
And what does this subroutine do? Why, it changes the background color of the HTA to red:
Sub TestSub
document.body.bgColor=”red”
End Sub
Pretty simple, huh? All we’re doing is grabbing the document.body object and then setting the value of the bgColor property to red. Would you rather set the background color to aquamarine? No problem:
document.body.bgColor=”aquamarine”
How about lavenderblush (you know, you can never go wrong with lavenderblush):
document.body.bgColor=”lavenderblush”
You can even – alas – set the background color to yellow:
document.body.bgColor=”yellow”
|
Note. Looking for a list of all the color values you can pass, by name, to the bgColor property? Look no further than the HTML and DHTML Reference on MSDN. |
Incidentally, CN, you noted in your email that you tried changing the background color by modifying the InnerHTML property of the HTA body; however, you weren’t able to get that to work. Why not? To answer that question, let’s take a look at a simple little <body> tag, one that sets the background color to red:
<body bgColor=”red”>
<b>This is the body of the document.<b>
</body>
As you can see, you specify the background color as part of the <body> tag itself. Is that important? You bet it is: that’s because the InnerHTML property only applies (in this case) to the stuff that comes between the beginning and ending <body> tags. Our beginning tag is this:
<body bgColor=”red”>
Our ending tag is this:
</body>
That means that the InnerHTML property will affect only this portion of the HTA:
<b>This is the body of the document.<b>
Using the InnerHTML property we can add buttons and check boxes and images and do all sorts of fun things. However, we can’t change the background color, assign a background picture, or do anything else to the <body> tag itself. We can do that only by directly accessing the properties of the document.body object. That’s why modifying the InnerHTML property didn’t do anything to change the background color.
|
Note. As a matter of fact, there is a property named OuterHTML, a property that can be used to completely replace an HTML object, including the starting and ending tags. However, the document.body object doesn’t support the OuterHTML property. |
As long as we’re on the subject, here’s a nifty little HTA. We won’t explain the code today, but when you click the button in this HTA a color picker dialog box appears on screen. Select a color, click OK, and the background color of the HTA will change to the color you selected in the dialog box (really; give it a try and see for yourself). Here’s the HTA code:
<SCRIPT LANGUAGE=”VBScript”>
Sub TestSub
intColor=dlgHelper.ChooseColorDlg
If intColor <> 0 then
document.body.bgColor=intColor
End If
End Sub
</SCRIPT>
<body>
<OBJECT id=dlgHelper CLASSID=”clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b” width=”0px” height=”0px”></OBJECT>
<input id=runbutton type=”button” value=”Run Script” name=”run_button” onClick=”TestSub”>
</body>
And here’s where you can find more information on the Dialog Helper object that makes this all possible.
As for the Scripting Guy’s family room, he didn’t bother to tell the contractor that yellow wasn’t actually a shade of white; having taken six months to finally get the job done he had no desire to wait another six months for Big Larry to get around to repainting the room. Instead, the Scripting Guy left part of the room yellow, painted a couple walls a reddish-color, and painted the trim and a few odds-and-ends white (the real white). Surprisingly enough, it turned out really nice, which means that this story has a happy ending.
Or at least as happy an ending as you can get when you’re dealing with contractors and insurance jobs.
|
More Information. For more on creating HTML Applications, see the HTA Developers Center. |
Light
Dark
0 comments