Index

How do I hide and show a XUL element?

Each XUL element has two attributes that can be used to hide and show it. The first is hidden which removes the element from the display. Set this attribute to true and the element will be hidden. It is equivalent to setting the CSS display property to none.

The second property is collapsed, which collapses the element so that it is not displayed. You can get a similar effect by setting the CSS visibility property to collapse.

For most purposes, you can use either, although there is a difference between them. Hiding an element causes Mozilla not to create anything to display the element whereas collapsed just changes the width and height to 0. You might note that a hidden element has no position, whereas a collapsed element does. You can get the position of an element using the boxObject.x and boxObject.y properties of an element.

The following example demonstrates the use of both attributes. Clicking the button will retrieve the position of two labels and then amkes them visible.

View
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="hideshow" title="Hide/Show" width="300" height="200"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
function checkPositions()
{
  // Get references to the hidden and collapsed labels
  var hidden=document.getElementById("hiddenLabel");
  var collapsed=document.getElementById("collapsedLabel");
  // Get the position of the hidden label using the x and y properties
  // of the boxObject. Use these values to assign a label. The
  // hidden label will have no position, resulting in (0,0).
  var val="Position of hidden element: "+
          hidden.boxObject.x+","+hidden.boxObject.y;
  hidden.setAttribute("value",val);
  // Remove the hidden attribute so that the label appears.
  hidden.removeAttribute("hidden");
  // Get the position of the collapsed label. Unlike the hidden
  // label, the collapsed element will have a position.
  val="Position of collapsed element: "+
          hidden.boxObject.x+","+hidden.boxObject.y;
  collapsed.setAttribute("value",val);
  // Remove the collapsed attribute so that the label appears.
  collapsed.removeAttribute("collapsed");
}
</script>
<button label="Check Positions" oncommand="checkPositions();"/>
<label id="hiddenLabel" hidden="true"/>
<label id="collapsedLabel" collapsed="true"/>
</window>
Copyright © 1999 - 2005 XULPlanet.com