How Can I Dynamically Hide and Show a Control in an HTA?

How Can I Dynamically Hide and Show a Control in an HTA?

  • Comments 2
  • Likes
Hey, Scripting Guy! Question

Hey, Scripting Guy! How can I dynamically hide and show a control in an HTA?

-- R L-K

SpacerHey, Scripting Guy! AnswerScript Center

Hey, R L-K. To tell you the truth, we’re a little distracted today. Admittedly, we’re a little distracted pretty much every day. However, today is different: today the Scripting Guy who writes this column in sitting on a powder keg that threatens to destroy the Scripting Guys forever!

We’ve probably never mentioned this before, but the Scripting Guy who writes this column has a son who’s wrapping up his junior year in high school. (From here on we’ll call him … let’s see .. how about “The Scripting Son”?) In the past year he’s gotten a steady stream of letters from colleges and universities from around the world, all of them encouraging him to explore the wonderful educational opportunities they have to offer. Drexel University, Pepperdine, Linfield College, Old Dominion: you name it, and there’s a good chance he’s heard from them.

Now that was all well and good, at least until yesterday, when he received a letter from – cue the ominous music – the University of Cambridge in Cambridge, England!

Interesting note. In the year 2009 the University of Cambridge will be celebrating its 800th anniversary. Although this has not been confirmed, we have reason to believe that Scripting Guy Peter Costantini – who was a member of the first graduating class at Cambridge – will be asked to deliver the commencement address.

So what’s wrong with the University of Cambridge? Nothing. Well, except for this: Cambridge and Oxford University are bitter rivals. And that’s a problem, because Scripting Guy Dean Tsaltas is currently pursuing a Master’s degree in computer science at Oxford. If the Scripting Son enrolls at Cambridge while Dean is still enrolled at Oxford, well, we shudder to think of what might happen.

Note. If you’re thinking, “Oxford University? Never heard of it; is that even an accredited college?” then you must work for the Microsoft department that initially turned down Dean’s request for tuition reimbursement, not believing that there is such a place as Oxford University.

You can just imagine the pressure we’re under; the tension is so thick in Scripting Guys headquarters that we could cut it with a knife. (Or we could if they’d actually allow us to have knives.) But still, duty calls, and as a graduate of the University of Washington (go Huskies!) the Scripting Guy who writes this column knows that, when the going gets tough, the tough show you how to dynamically hide and show a control in an HTA:

<SCRIPT Language="VBScript">
    Sub ToggleButton
        If HereThere.style.visibility="hidden" Then
            HereThere.style.visibility="visible"
        Else
            HereThere.style.visibility="hidden"
        End If
    End Sub
</SCRIPT>

<input type="button" value="Button" name="HereThere"><P>
<input type="button" value="Click to Hide/Show Button" onClick="ToggleButton">

What we have here is a very simple little HTA. (Yes, yes, we know: at either Oxford or Cambridge they’d create super-complicated HTAs. But remember, the Scripting Guy who writes this column graduated from an American university.) The body of our HTA contains two buttons. One (cleverly labeled Button) is the control we’re going to hide and show; the other (labeled Click to Hide/Show Button) is the button we’ll click any time we want to hide or show the other button. The HTML tagging for the two buttons looks like this:

<input type="button" value="Button" name="HereThere"><P>
<input type="button" value="Click to Hide/Show Button" onClick="ToggleButton">

And the HTA itself looks like this:

HTA

 

Note. Can you copy the preceding graphic and use it as your desktop wallpaper? Sure; help yourself.

That’s it for the body of the HTA. The only other piece to this scripting puzzle is a subroutine named ToggleButton. Each time we click the Click to Hide/Show Button button we call this subroutine; as you probably have already figured out, that’s what the onClick="ToggleButton" parameter is for:

<input type="button" value="Click to Hide/Show Button" onClick="ToggleButton">

So what does this subroutine do? Nothing. Nothing at all.

Oh, wait; that’s not true. What it actually does is first check to see if the Button button (which we gave the name HereThere) is visible on screen; that’s done by determining whether the Visibility attribute is set to hidden:

If HereThere.style.visibility="hidden" Then

If the Visibility attribute is hidden that means that the button is hidden; therefore we execute this line of code, which changes the value of the Visibility attribute to visible and, not coincidentally, causes the button to appear on screen:

HereThere.style.visibility="visible"

What if the Visibility attribute isn’t equal to hidden? In that case the button must be visible on screen; therefore we change the value of the Visibility attribute and, in turn, hide the button:

HereThere.style.visibility="hidden"

Will that really cause the button to disappear from our HTA window? See for yourself:

HTA


But don’t worry; it’s not gone for good. Just click Click to Hide/Show Button and the button will come back. You could keep clicking away all day long, repeatedly hiding and showing the other button. And we’re not just saying that; that’s pretty much how we’ve spent our morning.

Of course, you’re not limited to doing this only with buttons. You can also hide (and show) other controls. The one tricky part: unlike buttons, the labels of other controls might not be anchored to the control. Thus you might hide, say, a checkbox yet still have the label left onscreen. Likewise, you might have multiple controls you need to show or hide. In that case, your code could get a bit long, and a tad bit complicated.

Unless, of course, you put all of those controls in a <SPAN> and then hide and show the <SPAN>:

<SCRIPT Language="VBScript">
    Sub ToggleButton
        If HereThere.style.visibility="hidden" Then
            HereThere.style.visibility="visible"
        Else
            HereThere.style.visibility="hidden"
        End If
    End Sub
</SCRIPT>

<span id=HereThere>
    <INPUT type="checkbox" ID="box1">Option 1
    <INPUT type="checkbox" ID="box2">Option 2
    <INPUT type="checkbox" ID="box3">Option 3
    <INPUT type="checkbox" ID="box4">Option 4
</span>
<p>
<input type="button" value="Click to Hide/Show Button" onClick="ToggleButton">

Give that a try and you’ll see what we mean.

As for the Scripting Guys, now that we think about it this whole Oxford-Cambridge thing is probably “much ado about nothing.” (To quote William Shakespeare, who attended King Edward VI Grammar School in Stratford.) After all, what do you think the odds are that the Scripting Guy who writes this column is going to pay to send his son to the University of Cambridge in Cambridge, England? A snowball’s chance in where? Exactly.

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment
  • Thanks, this worked for and helped me solve a problem that was bugging me.  Awesome work that you are doing!

  • Thanks, It is helped to me to solve my problem.