Page elements can be made visible or can be hidden. Of course, the reason for hiding a page element is to reveal it later in response to a user event. There are two basic ways of hiding a page element depending on whether space on the page is to be preallocated for the revealed element.
| CSS and DOM Reference | Effects |
|---|---|
| visibility:hidden|visible object.style.visibility="hidden|visible" |
Specifies whether the element is hidden or visible; hidden elements are preallocated space
on the page if not positioned absolute. |
| display:block|inline|none object.style.display="block|inline|none" |
Specifies whether the element is hidden (none), displayed
in a separate block with line breaks before and after (block),
or inline within the flow of text (inline). Hidden elements
are not preallocated space on the page; visible elements push other elements down the
page. |
The visibility Property
Visibility of a page element can be controlled with the visibility style setting. The element can be made visible or hidden. If the element is positioned relative, then space on the page is allocated to make room for the revealed element.
In the following example, a popup menu is simulated. When the mouse is moved on top of the menu header, the hidden menu items are revealed. The block of blank space appearing beneath the header is the exact area where the items appear.
Other page content...
<div id="MENU"
style="position:relative; width:80px; text-align:center;
background-color:#DC6000; color:#FFFFFF; cursor:hand"
onmouseover="document.getElementById('ITEMS').style.visibility='visible'"
onmouseout="document.getElementById('ITEMS').style.visibility='hidden'">
Menu
</div>
<div id="ITEMS"
style="position:relative; visibility:hidden; width:80px; text-align:center;
background-color:#DEB887; color:#FFFFFF"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden'">
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 1
</div>
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 2
</div>
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 3
</div>
</div>
<p>Other page content...</p>
Both the "MENU" header and the menu "ITEMS" are defined as divisions. Position relative is applied so that these divisions are aligned one after the other. Within the "ITEMS" division are three stacked divisions containing the individual menu items. The "ITEMS" division is initially hidden by being styled visibility:hidden.
When the mouse is over the "MENU" division, the division containing the menu "ITEMS" is revealed by setting its visibility='visible' property. The "ITEMS" division is also coded with visibility= 'visible' on a mouseover event to keep it visible when the mouse is moved off the "MENU" division. When the mouse is moved off either division, visibility of the "ITEMS" division is hidden.
Even though the menu "ITEMS" division is initially hidden, it takes up space on the page by virtue of the fact that it is positioned relative. Space is reserved for positioned elements if they are not positioned absolute. In the following recoding, the "ITEMS" division has its position changed to absolute. It still appears after the relatively positioned "MENU" division, but it does not take up space on the page. When made visible, the "ITEMS" division overlays subsequent text on the page.
Other page content...
<div id="MENU"
style="position:relative; width:80px; text-align:center;
background-color:#DC6000; color:#FFFFFF; cursor:hand"
onmouseover="document.getElementById('ITEMS').style.visibility='visible'"
onmouseout="document.getElementById('ITEMS').style.visibility='hidden'">
Menu
</div>
<div id="ITEMS"
style="position:absolute; visibility:hidden; width:80px; text-align:center;
background-color:#DEB887; color:#FFFFFF"
onmouseover="this.style.visibility='visible'"
onmouseout="this.style.visibility='hidden'">
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 1
</div>
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 2
</div>
<div style="background-color:#DEB887"
onmouseover="this.style.backgroundColor='#9D4602'"
onmouseout="this.style.backgroundColor='#DEB887'"
onclick="location='url'">
Menu Item 3
</div>
</div>
<p>Other page content...</p>
When placing drop-down menus side-by-side across the page a slightly different tactic must be employed to position the individual menus. Place all of the menus in a single division that is positioned relative to the surrounding elements on the page. Then position the menu header and menu items absolute within this encompassing division.
The style properties relevant to this positioning are shown in the following code listing.
<div style="position:relative; width:240px; height:20px"> <div id="MenuA" style="position:absolute; width:80px; text-align:center; background-color:#DC6000; color:#FFFFFF; cursor:hand" onmouseover="document.getElementById('MenuItemsA').style.visibility='visible'" onmouseout="document.getElementById('MenuItemsA').style.visibility='hidden'"> Menu A </div> <div id="MenuItemsA" style="position:absolute; visibility:hidden; width:80px; left:0px; top:16px; text-align:center; background-color:#DEB887; color:#FFFFFF; cursor:hand" onMouseover="this.style.visibility='visible'" onMouseout="this.style.visibility='hidden'"> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 1 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 2 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 3 </div> </div> <div id="MenuB" style="position:absolute; width:80px; left:80px; top:0px; text-align:center; background-color:#DC6000; color:#FFFFFF; cursor:hand" onmouseover="document.getElementById('MenuItemsB').style.visibility='visible'" onmouseout="document.getElementById('MenuItemsB').style.visibility='hidden'"> Menu B </div> <div id="MenuItemsB" style="position:absolute; width:80px; left:80px; top:16px; text-align:center; background-color:#DEB887; color:#FFFFFF; visibility:hidden; cursor:hand" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'"> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 1 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 2 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 3 </div> </div> <div id="MenuC" style="position:absolute; width:80px; left:160px; top:0px; text-align:center; background-color:#DC6000; color:#FFFFFF; cursor:hand" onmouseover="document.getElementById('MenuItemsC').style.visibility='visible'" onmouseout="document.getElementById('MenuItemsC').style.visibility='hidden'"> Menu C </div> <div id="MenuItemsC" style="position:absolute; width:80px; left:160px; top:16px; text-align:center; background-color:#DEB887; color:#FFFFFF; visibility:hidden; cursor:hand" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'"> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 1 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 2 </div> <div style="background-color:#DEB887" onmouseover="this.style.backgroundColor='#9D4602'" onmouseout="this.style.backgroundColor='#DEB887'" onclick="location='url'"> Menu Item 3 </div> </div>
The display Property
The display property differs from the visibility property in that it does not reserve space for hidden items nor does it overlay subsequent elements on the page with revealed items. When a page element is hidden with display:none, subsequent elements on the page close up. When a page element is revealed with display:block or display:inline, subsequent elements are pushed down the page to make room for the revealed items. You can see this happening with the following menu.
Other page content...
<div style="position:relative; width:100px; color:#DC6000; cursor:hand" onmouseover="document.getElementById('Submenu').style.display='block'" onmouseout="document.getElementById('Submenu').style.display='none'"> <b>Main Menu</b><br/> <div id="Submenu" style="position:relative; display:none" > <a href="url">Menu Item 1</a><br/> <a href="url">Menu Item 2</a><br/> <a href="url">Menu Item 3</a><br/> <a href="url">Menu Item 4</a><br/> <a href="url">Menu Item 5</a><br/> </div> </div> <p>Other page content...</p>
All coded items appear inside an encompassing division that is positioned relative within the flow of page elements. The division is sized with width:100px to encompass the menu items and keep it from spanning the width of the page. The "Submenu" division containing the links is initially styled with display:none to make it invisible and to close up subsequent elements on the page. When the mouse is moved on top of the main division, the "Submenu" division is revealed with display:block, which pushes subsequent elements down the page to make room for their viewing. When the mouse is moved off the main division, the "Submenu" division is hidden and the page elements close up.
Controlling display visibility is not only for menus. In the following example, links embedded in the text display definitions of terms by displaying inline text through mouseover events.
Not only can you bring visual variety to a Web page through styling variety, you can even change static content to dynamic content by changing the text display in response to user actions.
<p>Not only can you bring visual variety to a Web page through styling variety, you can even change <a href="javascript:" onmouseover="document.getElementById('Text1').style.display='inline'" onmouseout="document.getElementById('Text1').style.display='none'">static</a> <span id="Text1" style="color:red; display:none"> (a reference to unchanging content on a Web page)</span> content to <a href="javascript:" onmouseover="document.getElementById('Text2').style.display='inline'" onmouseout="document.getElementById('Text2').style.display='none'">dynamic</a> <span id="Text2" style="color:red; display:none"> (a reference to changing content on a Web page)</span> content by changing the text display in response to user actions. </p>
Following a text link is a <span> tag enclosing the definition of the term. The tag is initially set to display:none to hide it. On a mouseover of the link, the tag is switched to display:inline to open up surrounding text and display the definition. On a mouseout of the link, the tag is switched to display:none to hide it again. As an inline display, the definition is neither preceded nor followed by a line break.