Review 2: Hiding and Showing Content
The hiding and showing of layers (as defined by absolutely positioned divs) is quite easy. Much more so then even the form validation example. I chose this as an example because it brings up some important interaction with a page element's style. Interacting with the browser's document object model, and specifically the style property of page elements is the basis for all DHTML. I also felt it important to have at least one example which dealt with handling the way different browsers work. See the working script in action.
Step 1: When?
This is no different then the previous two examples, except that we have two points of interaction on the page. Additionally, like we had to do with the form if there was an error, we have to prevent the browser from following the clicked on link. Since we always want to prevent this, we will put the return false statement directly in the onclick.
<html>
<head>
<title>Show and Hide a Layer</title>
<style>
#boxthing {
position:absolute;
top:100px;
left:50px;
width:250px;
height:150px;
border:1px #000000 solid;
background-color:#FF9999;
padding:0.5em; }
</style>
<script>
function handleClick(whichClick) {
if (whichClick == "hide it") {
}
else if (whichClick == "show it") {
}
}
</script>
</head>
<body>
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a><br>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a><br>
<div id="boxthing"><p>Use the links above to show and hide this layer.<p></div>
</body>
Step 2: What?
To answer this question in the form validation example we had to think a bit. This time around the answer is very straightforward.
<html>
<head>
<title>Show and Hide a Layer</title>
<style>
#boxthing {
position:absolute;
top:100px;
left:50px;
width:250px;
height:150px;
border:1px #000000 solid;
background-color:#FF9999;
padding:0.5em; }
</style>
<script>
function hideLayer() {
}
function showLayer() {
}
function handleClick(whichClick) {
if (whichClick == "hide it") {
// then the user wants to hide the layer
hideLayer();
}
else if (whichClick == "show it") {
// then the user wants to show the layer
showLayer();
}
}
</script>
</head>
<body>
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a><br>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a><br>
<div id="boxthing"><p>Use the links above to show and hide this layer.<p></div>
</body>
Step 3: How?
I held off bringing it up as long as I could, but when we are moving layers around a screen we must deal with the way different browsers work. Our script will provide functionality for any browser that falls into one of the following 3 categories: It works according to the current standards, it works like older versions of MS Internet explorer, or it works like Netscape 4. I am careful to say 'like' and not 'is'. That is because the script will not be checking browser versions directly, but instead checking functionality.
<html>
<head>
<title>Show and Hide a Layer</title>
<style>
#boxthing {
position:absolute;
top:100px;
left:50px;
width:250px;
height:150px;
border:1px #000000 solid;
background-color:#FF9999;
padding:0.5em; }
</style>
<script>
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
function handleClick(whichClick) {
if (whichClick == "hide it") {
// then the user wants to hide the layer
hideLayer("boxthing");
}
else if (whichClick == "show it") {
// then the user wants to show the layer
showLayer("boxthing");
}
}
</script>
</head>
<body>
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a><br>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a><br>
<div id="boxthing"><p>Use the links above to show and hide this layer.<p></div>
</body>
