Hiding content in an HTA

Batch, ASP, JScript, Kixtart, etc.
Forum rules
Do not post any licensing information in this forum.

Any code longer than three lines should be added as code using the 'Select Code' dropdown menu or attached as a file.
Locked
User avatar
rasimmer
Posts: 182
Joined: Fri Jan 30, 2009 12:37 am

Hiding content in an HTA

Post by rasimmer » Mon Jul 06, 2009 5:27 am

I have a hidden div that contains a lengthy form. My problem is that even though it's visibility is set to hidden, it's still taking up room on my content pane. All I was doing was setting the form from hidden to visible, but I'm trying to content to a certain pane. I was looking through some of jvierra's examples and he had used an XML tag around some content and it didn't add to the body length, it was hidden, and he simply just set the output of the popup to the xml.innerhtml. The problem is that I can't get any of the object values if I use the xml method. So, with the div hidden it's using space on my form and with xml I can't access the objects which is pointless. Any ideas? Thanks.

User avatar
rasimmer
Posts: 182
Joined: Fri Jan 30, 2009 12:37 am

Hiding content in an HTA

Post by rasimmer » Mon Jul 06, 2009 7:18 am

Sorry bout that, was trying to explain in words vs. code. In this example, the main div background is lightblue. You can see that even though the content is hidden, the space is still used by the div. I'm trying to avoid dynamically creating this form, so I noticed that when you utilized the XML tags, that it did not utilize any space in the lightblue portion. I basically am trying to avoid the footprint of the hidden form on the page. Make sense?

Code: Select all

<html>
<head>
    <meta content="text/VBScript" http-equiv="content-script-type" />
    <title>HTA Sampler</title>
<hta:application
 applicationname="Test"
 border="thick"
 borderstyle="raised"
 caption="yes"
 contextmenu="yes"
 icon="no.ico"
 maximizebutton="yes"
 minimizebutton="yes"
 navigable="yes"
 scroll="yes"
 selection="yes"
 showintaskbar="yes"
 singleinstance="no"
 sysmenu="yes"
 version="1.0"
 windowstate="normal"
>
    <script language="vbscript">
        <!--
        Sub Window_OnLoad
            CenterWindow 520, 600
        End Sub
        
        Sub CenterWindow(widthX, heightY)
            self.ResizeTo widthX, heightY
            self.MoveTo (screen.Width - widthX)/2, (screen.Height - heightY)/2
        End Sub
        
        Sub btn_Show_onClick()
            div_Options.style.visibility="visible"
        End Sub  
        
        Sub btn_ClearDiv_onClick()
            div_Main.InnerHTML = ""
            btn_Show.Disabled = True
        End Sub  
    --> 
    </script>
</head>
<body>
<button class="button" id="btn_Show" title="Show the hidden form...">Show Form</button>&nbsp&nbsp
<button class="button" id="btn_ClearDiv" title="Clear DIV and remove 'footprint'...">I want it to look like this</button>
    <div id="div_Main" style=" background-color:LightBlue;width:100%;">
          <div id="div_Options" style="visibility=hidden;">
            <div class="div_Option_Hdr"><b>Options:</b></div>
            
            <p>BLAH BLAH  BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                 BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                  BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                   BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
            </p>
            <div class="div_Option_Hdr">Build Options:</b></div>
            <table width="100%" class="tbl_Options">
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Alliance"> Configure This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_ShopFloor"> Configure That</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_RemImgWrt"> Remove Thisr</td>
                <tr>
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_NotesCntrl"> Install This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_JPEGHack"> Install That</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_ShopFlrIcon"> Copy these</td>
                <tr>
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Certs"> Install those</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_IXOSHack"> Run this</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_PDMHack"> Run that</td>
                <tr>                                                               &nb
       sp; 
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Abaco"> Copy this</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_NWA"> Run Those</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_RunHold"> Execute this</td>
                <tr>                                                                 
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Compass"> Execute that</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Opt1"> Move This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Opt2"> Move That</td>
                <tr>                                                                 
            </table>
            
                        
            <div class="div_Option_Hdr">Copy Files From:</b></div>
            

            Choose a server to get installation files from:
            <table class="tbl_Options">
                <tr>
                    <td valign="middle">Choose a server: 
                        <select size="1" name="drp_FarmServers">
                            <option value="NULL">Farm not found</option>
                            <option value="srv1">Server1</option>
                            <option value="srv2">Server2</option>
                        </select>
                    </td>
                    <td>&nbsp&nbsp <b>OR<b> &nbsp&nbsp</td>
                    <td valign="middle">Specify a server: <input type="text" name="txt_ServerSource" size="25" value="~SERVER_NAME~"></td>
                    <td id="td_Status"></td>
                </tr>
            <table>
            

            <div class="div_Option_Hdr">Reboot Suppression Option:</b></div>
            

            <input type="checkbox" class="checkbox"  name="chk_Reboot" checked> Reboot Server

            

        </div> <!-- Close id="div_Options" -->
    </div><!-- Close id="div_Main" -->
</body>

User avatar
jvierra
Posts: 13736
Joined: Tue May 22, 2007 9:57 am
Contact:

Hiding content in an HTA

Post by jvierra » Mon Jul 06, 2009 11:13 am

Here is one loaded from an XML data island.

Code: Select all

<html>
<head>
    <meta content="text/VBScript" http-equiv="content-script-type" />
    <title>HTA Sampler</title>
<hta:application
 applicationname="Test"
 border="thick"
 borderstyle="raised"
 caption="yes"
 contextmenu="yes"
 icon="no.ico"
 maximizebutton="yes"
 minimizebutton="yes"
 navigable="yes"
 scroll="yes"
 selection="yes"
 showintaskbar="yes"
 singleinstance="no"
 sysmenu="yes"
 version="1.0"
 windowstate="normal"
>
    <script language="vbscript">
        <!--
        Sub Window_OnLoad
            CenterWindow 520, 600
        End Sub
        
        Sub CenterWindow(widthX, heightY)
            self.ResizeTo widthX, heightY
            self.MoveTo (screen.Width - widthX)/2, (screen.Height - heightY)/2
        End Sub
        
        Sub btn_Show_onClickx()
            div_Options.style.visibility="visible"
        End Sub  
        
        Sub btn_Show_onClick()
            div_Main.innerHTML = frmText.InnerHTML
        End Sub  
        
        Sub btn_ClearDiv_onClick()
            div_Main.InnerHTML = ""
            btn_Show.Disabled = True
        End Sub  
    --> 
    </script>
</head>
<body>
    <button class="button" id="btn_Show" title="Show the hidden form...">Show Form</button>&nbsp&nbsp
    <button class="button" id="btn_ClearDiv" title="Clear DIV and remove 'footprint'...">I want it to look like this</button>
    <div id="div_Main" style="">
    </div><!-- Close id="div_Main" -->
</body>
 
<xml id="frmText">
          <div id="div_Options" style="background-color:blue">
            <div class="div_Option_Hdr"><b>Options:</b></div>
            
            <p>BLAH BLAH  BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                 BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                  BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
                   BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
            </p>
            <div class="div_Option_Hdr">Build Options:</b></div>
            <table width="100%" class="tbl_Options">
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Alliance"> Configure This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_ShopFloor"> Configure That</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_RemImgWrt"> Remove Thisr</td>
                <tr>
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_NotesCntrl"> Install This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_JPEGHack"> Install That</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_ShopFlrIcon"> Copy these</td>
                <tr>
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Certs"> Install those</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_IXOSHack"> Run this</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_PDMHack"> Run that</td&
       gt;
                <tr>                                                                 
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Abaco"> Copy this</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_NWA"> Run Those</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_RunHold"> Execute this</td>
                <tr>                                                                 
                <tr>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Compass"> Execute that</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Opt1"> Move This</td>
                    <td width="33%"><input type="checkbox" class="checkbox"  name="chk_Opt2"> Move That</td>
                <tr>                                                                 
            </table>
            
                        
            <div class="div_Option_Hdr">Copy Files From:</b></div>
            

            Choose a server to get installation files from:
            <table class="tbl_Options">
                <tr>
                    <td valign="middle">Choose a server: 
                        <select size="1" name="drp_FarmServers">
                            <option value="NULL">Farm not found</option>
                            <option value="srv1">Server1</option>
                            <option value="srv2">Server2</option>
                        </select>
                    </td>
                    <td>&nbsp&nbsp <b>OR<b> &nbsp&nbsp</td>
                    <td valign="middle">Specify a server: <input type="text" name="txt_ServerSource" size="25" value="~SERVER_NAME~"></td>
                    <td id="td_Status"></td>
                </tr>
            <table>
            

            <div class="div_Option_Hdr">Reboot Suppression Option:</b></div>
            

            <input type="checkbox" class="checkbox"  name="chk_Reboot" checked> Reboot Server

            

        </div> <!-- Close id="div_Options" -->
</xml>

User avatar
jvierra
Posts: 13736
Joined: Tue May 22, 2007 9:57 am
Contact:

Hiding content in an HTA

Post by jvierra » Tue Jul 07, 2009 12:41 am

uploads/2491/hta_form.zip



http://www.sapien.com/forums/uploads/2491/hta_form.txt


Use teh above. DO not edit until you can see how it works. Both work perfectly on any system I use these on.

The extension must be HTA. I suspect you are mistranslating something.

The DIV does NOT take up any space when it is empty however a DIV with no specifications will ALWAYS size to the prevailing empty space. You can only cahnge this by setting a fixed size for the div. DIVs expand to take up available space.

It is still completely unclear to me what you are trying to accomplish. Are you trying to get teh whole Window to change size when the DIV is displayed?

User avatar
jvierra
Posts: 13736
Joined: Tue May 22, 2007 9:57 am
Contact:

Hiding content in an HTA

Post by jvierra » Tue Jul 07, 2009 1:43 am

When you start doing other than trivial things with HTML/HTA any mistakes will create weird issues. DEbugginh HTML has always been a headache.

To certify HTML use W3C test sites. Certify without XML dat aislands as the HTML templates don't handle that extension well. This will help you learn to avoid errors. No cosing tag and wrong closing tags create special issues downstream of the error. Wrapping the body tag around teh XML tag will cause an issue even though it is permissable to use xml in the body. The issue is that you do not have real xml but are using xml as a convenient and legal tag. Outside of teh body the parser seems to ignore the tag errors (no XML statement and no well formed). We could use XHTML and all wopuld be fine however it takes some getting used to to be able to type "well-formed" HTML. (XHTML).

Validator is here:
http://validator.w3.org/

-

Locked