Sams Teach Yourself JavaScript in 24 Hours

Hiding and Showing Objects

We will now move on to a number of real-world examples using the DOM objects to manipulate web pages. As a simple example, you can create a script that hides or shows objects within a page.

As you learned in Hour 13, objects have a visibility style property that specifies whether they are currently visible within the page:

Object.style.visibility="hidden"; // hides an object
Object.style.visibility="visible"; // shows an object

Using this property, you can create a script that hides or shows objects in either browser. Listing 14.1 shows the HTML document for a script that allows two headings to be shown or hidden.

Listing 14.1. Hiding and Showing Objects

<html> <head> <title>Hiding and Showing Objects</title> <script language="Javascript" type="text/javascript"> function ShowHide() { if (!document.getElementById) return; var head1 = document.getElementById("head1"); var head2 = document.getElementById("head2"); var showhead1 = document.form1.head1.checked; var showhead2 = document.form1.head2.checked; head1.style.visibility=(showhead1) ? "visible" : "hidden"; head2.style.visibility=(showhead2) ? "visible" : "hidden"; } </script> </head> <body> <h1 ID="head1">This is the first heading</h1> <h1 ID="head2">This is the second heading</h1> <p>Using the W3C DOM, you can choose whether to show or hide the headings on this page using the checkboxes below.</p> <form name="form1"> <input type="checkbox" name="head1" checked onClick="ShowHide();"> <b>Show first heading</b><br> <input type="checkbox" name="head2" checked onClick="ShowHide();"> <b>Show second heading</b><br> </form> </body> </html>

The <h1> tags in this document define headings with the identifiers head1 and head2. The <form> section defines a form with two check boxes, one for each of the headings. When a check box is modified, the onClick method is used to call the ShowHide() function.

This function is defined within the <script> statements in the header. The function assigns the head1 and head2 variables to the objects for the headings, using the getElementById() method. Next, it assigns the showhead1 and showhead2 variables to the contents of the check boxes. Finally, the function uses the style.visibility attributes to set the visibility of the headings.

Did you Know?

The lines that set the visibility property might look a bit strange. The ? and : characters create conditional expressions, a shorthand way of handling if statements. To review conditional expressions, see Hour 7, "Controlling Flow with Conditions and Loops."

Figure 14.1 shows this example in action in Internet Explorer. In the figure, the second heading's check box has been unchecked, so only the first heading is visible.

Figure 14.1. The text hiding/showing example in Internet Explorer.

[View full size image]

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Main Menu

	More Books
	PHP Hacks
	Processing Xml With Java - A Guide To Sax, Dom, Jdom, Jaxp, And Trax
	The Koran (Holy Qur'an)
	Macromedia Flash 8 Bible
	Search Engine Optimization for Dummies
	YouTube Traffic
	PHP 5 for Dummies
	Harry Potter and The Chamber of Secrets
	Harry Potter and the Sorcerer's Stone
	The Pilgrim's Progress
	Wireless Hacks
	Flash Hacks. 100 Industrial-Strength Tips & Tools
	PayPal Hacks. 100 Industrial-Strength Tips and Tools
	Amazon Hacks
	Pdf Hacks
	The Da Vinci Code
	Google Hacks
	The Holy Bible
	Windows XP For Dummies
	Harry Potter and the Half-Blood Prince
	Seo Book
	Upgrading and Repairing Networks
	Macromedia Dreamweaver 8 UNLEASHED
	Windows XP Annoyances
	Windows XP Hacks
	Microsoft Windows XP Power Toolkit
	Teach Yourself MS Office In 24Hours
	iPod & iTunes Missing Manual
	PC Hacks 100 Industrial-Strength Tips and Tools
	PC Overclocking, Optimization, and Tuning - 2th Edition
	PC Hardware In A Nutshell 3rd Edition
	PC Hardware in a Nutshell, 2nd Edition
	Upgrading and Repairing PCs
	Google for Dummies
	MySQL Cookbook
	Teach Yourself Macromedia Flash 8 In 24 Hours
	PHP CookBook
	Sams Teach Yourself JavaScript in 24 Hours
	PHP5 Manual

Free Games Paper Airplanes

500 Kostenlose Spiele