ClarkePeter’s Weblog

A dropover is a drop box that is intended to drop down over any elements that are displayed below it.
For an example see Drop Down over/above lower text (Xforms Switch and CSS). In fact, you’ll need to look over that post to get an idea of what’s going on here (you may want to look at Switch/Case Toggle Template or Using Switch Case as a drop down box).

You’ll also need to look at No files selected (using xf:bind and relevant) –the point of that post not being the file selection but the ability to hide any portion of your document, dependent on some condition, by combining the use of xforms-group, xforms-bind, and xforms-relevant. We’ll use all these in this solution.

First, let’s get to the problem. I was using the css absolute position to allow my menu box to drop down over other elements. Then I decided to have two such boxes do the same thing. There is only one problem. When two absolute positioned divs are next to each other, either side-by-side or one above the other in a column style, the second div text won’t hide. A picture is worth a thousand words, so here:

in columnar fashion:

or in bar fashion

and sometimes you get this, which is actually pretty cool, but not very useful:

Sticking with the bar menu, here’s how the divisions are set (this is the structure, not the exact coding):

<h:div style="padding:1ex; position:relative;">

<h:div style="position:absolute; left:1ex; top:2ex;">
<!-- ******** Main Menu *************-->
<h:div>

<h:div style="position:absolute; left:22ex; top:2ex;">
<!-- ******** View File List ******* -->
<h:div>

<h:div>

..... the rest of the xhtml+xforms doc

</h:html>

The best way to overcome this problem is to encase the ‘view file list’ division inside an xf:group that depends on the relevancy of another element. By doing so, when the dependant element becomes some other value than 1–in our case, zero– then the ‘view file list’ will simply disappear.
code:

<h:div style="padding:1ex; position:relative;">

<h:div style="position:absolute; left:1ex; top:2ex;">
<!-- ******** Main Menu *************-->
<h:div>

<xf:group model='mod2' ref='//fileListOn'>
<h:div style="position:absolute; left:22ex; top:2ex;">
<!-- ******** View File List ******* -->
<h:div>
   </xf:group>

<h:div>

I have decided that in all my xhtml+xforms to keep a model “mod2″ that is set aside exclusively for controlling controls. So in our mod2, as shown in my earlier posts, we’ll add this (ignore all but the highlighted):

<xf:model id="mod2">
<xf:instance id="inst2">
<data xmlns="">
<uplSelected>0</uplSelected>
<uplTriggerOn/>
<uplTriggerOff/>
<delFileSelected>0</delFileSelected>
<delTriggerOn/>
<delTriggerOff/>
         <vwFileList>1</vwFileList>
<fileListOn/>
</data>
</xf:instance>

<xf:bind  nodeset="uplTriggerOn" relevant="//uplSelected = 1"/>
<xf:bind  nodeset="uplTriggerOff" relevant="//uplSelected = 0"/>
<xf:bind  nodeset="delTriggerOn" relevant="//delFileSelected = 1"/>
<xf:bind  nodeset="delTriggerOff" relevant="//delFileSelected = 0"/>
   <xf:bind  nodeset="fileListOn" relevant="//vwFileList = 1"/>
</xf:model>

Notice that vwFileList is initially set to 1, this allows for an initial view of the ‘view list file’ division.

So we need to set up how the vwFileList value will get changed from 1 to 0, making the vwFileList value a zero, hence, making the fileList On element irrelevant, hence, hiding the xf:group for ‘view list file’ division. We’ll do this in our ‘main menu’ Switch/case section. This way when someone clicks on the main menu to open it, the ‘view file list’ will disappear. When they click on it again to close it, the ‘view file list’ will reappear. (I left out the styling below–keep in mind that the filedset width of ‘main menu’ and ‘view file list’ is set at 24ex )

<xf:switch>

<xf:case id='menuShut'>
<xf:trigger appearance='minimal'>
<xf:label>:: Main Menu ::</xf:label>
<xf:toggle case='menuOpen' ev:event='DOMActivate'/>
                <xf:setvalue ev:event="DOMActivate" model="mod2"
ref='//vwFileList' value="'0'"/>
</xf:trigger>
</xf:case>

<xf:case id='menuOpen'>
<xf:trigger appearance='minimal'>
<xf:label>:: Main Menu ::</xf:label>
<xf:toggle case='menuShut' ev:event='DOMActivate'/>
                <xf:setvalue ev:event="DOMActivate" model="mod2"
ref='//vwFileList' value="'1'"/>
</xf:trigger>

.... the MENU contents here .....
.... the MENU contents here .....
</xf:case>

</xf:switch>

The outcome will look like this, notice the disappearing ‘view file list’ :