HELP! How does this work?

the100thballoon · Apr 8, 2005

How does this work? Which function(s) (plural not a function called s) make the text appear only when each question is clicked? Which function(s) make the text disappear again when each question is clicked the second time?

Code:

<HTML>
<HEAD>
<TITLE>Nomad Ltd DHTML FAQ</TITLE>

<SCRIPT LANGUAGE="javascript"> 
<!--
Nav4 = (document.layers) ? 1:0;
IE4 = (document.all) ? 1:0;
ver4 =(Nav4 || IE4)?1:0;

function getNumber(el) {
	num=null;
	for (i=0; i<document.layers.length; i++) {
		theEl=document.layers[i];
		if (theEl.id==el) {
			num=i;
			break;
		}
	}
	return num;
}

function arrange() {
	nextY=document.layers[firstNum].pageY + document.layers[firstNum].document.height-10;
	for (i=firstNum+1; i<document.layers.length; i++) {
		theEl=document.layers[i];
		if (theEl.visibility != "hide") {
			theEl.pageY=nextY;
			nextY += theEl.document.height-10;
		}
	}
}

function init(){
	if (Nav4) {
		for (i=0; i<document.layers.length; i++) {
			theEl=document.layers[i];
			if (theEl.id.indexOf("Answer") != -1) {
				theEl.visibility="hide";
				theEl.expanded=false;
			}
		}
		arrange();
		}
	else {
		tempColl=document.all.tags("DIV");
		for (i=0; i<tempColl.length; i++) {
			if (tempColl(i).className == "answer") {
				tempColl(i).style.display="none";
				tempColl(i).expanded=false;
			}
		}
	}
}


function expand(el) {
	if (!ver4) return;
	if (IE4) {
		expandIE(el)
	} 
	else {
		expandNav(el)
	}
}

function expandIE(el) {
  theEl=eval(el + "Answer");
  if (theEl.style.display == "none") {
        theEl.style.display ="block";
        theEl.expanded=true;
  }
  else {
        theEl.style.display="none";
        theEl.expanded=false;
  }
}


function expandNav(el) {
	theEl=eval("document." + el + "Answer");
	if (theEl.visibility == "hide") {
		theEl.visibility="show";
		theEl.expanded=true;
	}
	else {
		theEl.visibility="hide";
		theEl.expanded=false;
	}
	arrange();
}

function showAll() {
	for (i=firstNum; i<document.layers.length; i++) {
		theEl=document.layers[i];
		theEl.visibility="show";
	}
}

with (document) {
	write("<STYLE TYPE='text/css'>");
	if (Nav4) {
		write(".question {position: absolute; visibility: hidden; left: 40px}");
		write(".answer {position: absolute; visibility: hidden; left: 50px; width: 90%}");
	}
	else {
		write(".question {position: relative; left: 40px}");
		write(".answer {display: none; position: relative; left: 50px; width: 90%}");
	}
	write("</STYLE>");
}
		
window.onload=init;
//-->
</SCRIPT>

<STYLE TYPE="text/css">
<!--
H1 {font-family: arial, sans-serif; font-size: 20pt; font-style: normal} 
H2 {font-family: "times new roman", times, serif; font-size: 14pt; font-style: italic} 
H3 {font-family: arial; font-size: 12pt; color: #4619E1; position: relative; left: 20px; top: -10px}
.question {font-family: "times new roman", times, serif; font-size: 12pt; font-weight: bold}
.question A {font-family: arial; font-size: 12pt; font-weight: bold; text-decoration: none; color: black}
.rest {position: absolute; left: 25px}
//-->
</STYLE>

</HEAD>

<BODY BACKGROUND="Egg shell.jpg">

<DIV ALIGN="center"><IMG SRC="nomad.jpg" ALIGN="right">
<H2>Frequently Asked Questions about</H2>
<H1>Dynamic HTML (DHTML)</H1></DIV><BR>

<H3>Click any of the popular questions about DHTML below to see its answer.</H3>

<DIV ID="oneQuestion" CLASS="question"><a href="#" onClick="expand('one');return false"> <P>What is Dynamic HTML?</P></a> </DIV>

<DIV ID="oneAnswer" CLASS="answer"><P>Dynamic HTML (DHTML) describes a set of new technologies for designing Web pages that allow new and more precise formatting features, along with faster access for users.</P></DIV>

<DIV ID="twoQuestion" CLASS="question"><a href="#" onClick="expand('two');return false"> <P>Is DHTML a new language?</P></a> </DIV>

<DIV ID="twoAnswer" CLASS="answer"><P>DHTML is not a new language. DHTML is simply a snazzy name for a set of new features that recent Web browsers are equipped to interpret and use. DHTML features work only within the context of a standard HTML document.</P></DIV>

<DIV ID="threeQuestion" CLASS="question"><a href="#" onClick="expand('three');return false"> <P>How does DHTML work?</P></a> </DIV>

<DIV ID="threeAnswer" CLASS="answer"><P>DHTML uses two new pieces in concert with HTML. The first is scripts that run on the user's browser, written in a scripting language such as JavaScript or VBScript. The other is Cascading Style Sheets, a new method of specifying exact styles for a Web page's elements.</P></DIV>

<DIV ID="fourQuestion" CLASS="question"><a href="#" onClick="expand('four');return false"> <P>What can I do with DHTML?</P></a> </DIV>

<DIV ID="fourAnswer" CLASS="answer"><P>DHTML allows you to specify many details of the way you want text to display in a user's browser, including font size, color, and background. You can also precisely position text blocks and other elements in a Web page without using tables. One of DHTML's most impressive features, however, is its ability to instantly change the appearance and content of the current Web page in response to user actions. While this feature may sound similar to options already available in HTML, such as links and pop-up boxes, dynamic HTML makes changes instantly without contacting the Web server, and allows you almost unlimited formatting options, which plain HTML can't do.</P></DIV>

<DIV ID="fiveQuestion" CLASS="question"><a href="#" onClick="expand('five');return false"> <P>What do I need to learn to use DHTML?</P></a> </DIV>

<DIV ID="fiveAnswer" CLASS="answer"><P>DHTML features require familiarity with two main technologies. To manipulate Web page styles dynamically, you need to learn the structure and syntax of cascading style sheets (CSS). Additionally, in order to make your Web pages interactive with user actions, you need to become familiar with a simple scripting language. I recommend learning JavaScript, as it's the only scripting language compatible with both Navigator and Internet Explorer.</P></DIV>

<DIV ID="sixQuestion" CLASS="question"><a href="#" onClick="expand('six');return false"> <P>What are Cascading Style Sheets?</P></a> </DIV>

<DIV ID="sixAnswer" CLASS="answer"><P>Cascading Style Sheets (CSS) is the term for a method of specifying detailed display information for your Web pages. "Style sheets" refers to the insertion of style details for individual text blocks, certain tags through the Web page, or even for tags among several Web pages. "Cascading" describes the hierarchical structure this formatting follows, allowing you to make changes to style specifications at lower levels (such as a specific line) while higher-level formatting (for the tag or section) remains in force.</P></DIV>

<DIV ID="sevenQuestion" CLASS="question"><a href="#" onClick="expand('seven');return false"> <P>Where can I learn more about DHTML?</P></a> </DIV>

<DIV ID="sevenAnswer" CLASS="answer"><P>The following Web sites contain detailed information about DHTML:</P>

<UL TYPE="square">
<LI><A HREF="http://www.hotwired.com/webmonkey/dynamic_html/">WebMonkey</A>
<LI><A HREF="http://www.w3.org/Style/css/">W3</A>
</UL>
</DIV>


<DIV ID="itemRest" CLASS="rest">More questions? Email <A HREF="MAILTO:LBurgos@nomadltd.com">Lydia</A></DIV>

<SCRIPT LANGUAGE="JavaScript">
<!--
if (Nav4) {
	firstEl="oneQuestion";
	firstNum=getNumber(firstEl);
	showAll();
	arrange();
}
//-->
</SCRIPT>

</BODY>
</HTML>

Here is the page so that you can see what I am talking about.

the100thballoon · Apr 8, 2005

I just want to copy the show/hide trick for my own web site. Is there an easier way to accomplish this?

Chieftess · Apr 8, 2005

The short answer:

someID.style.display="none/hidden"

Code:

function expand(el) {
	if (!ver4) return;
	if (IE4) {
		expandIE(el)
	} 
	else {
		expandNav(el)
	}
}

function expandIE(el) { 
	theEl=eval(el + "Answer");
	if (theEl.style.display == "none") {
		theEl.style.display="block";
		theEl.expanded=true;
	}
	else {
		theEl.style.display="none";
		theEl.expanded=false;
	}
}

function expandNav(el) {
	theEl=eval("document." + el + "Answer");
	if (theEl.visibility == "hide") {
		theEl.visibility="show";
		theEl.expanded=true;
	}
	else {
		theEl.visibility="hide";
		theEl.expanded=false;
	}
	arrange();
}

expand(el) (el is a variable) is a function that checks if the user is using Netscape, or Internet Explorer.

The next two expand functions do pretty much the same thing. The only two you need to worry about are:

theEl.style.display="block"; (I've seen hidden other times, but I think anything other than "none" will do the trick)
theEl.style.display="none";

The core is this:

Code:

	if (theEl.style.display == "none") {
		theEl.style.display="block";
		theEl.expanded=true;
	}
	else {
		theEl.style.display="none";
		theEl.expanded=false;
	}

the100thballoon · Apr 8, 2005

My browser keeps saying that the "display" property is an invalid argument.

Code:

<html>

<head>
<script language="javascript">

function show() {
	answer.style.visibility ="block";
}

function hide() {
	answer.style.visibility="hidden"
}

function load() {
	answer.style.display="hidden"
}
</script>
</head>


<body onLoad="load()">
<div id="question" onClick="show()"><a href="#">What is your name?</a></div>
<span id="answer" onClick="hide()">My name is Pizza Hut.</span>

</body>

</html>

Then I changed it to "visibility" and it loads but then it doesnt reappear when I click it.

Code:

<html>

<head>
<script language="javascript">

function show() {
	answer.style.visibility ="block";
}

function hide() {
	answer.style.visibility="hidden"
}

function load() {
	answer.style.visibility="hidden"
}
</script>
</head>


<body onLoad="load()">
<div id="question" onClick="show()"><a href="#">What is your name?</a></div>
<span id="answer" onClick="hide()">My name is Pizza Hut.</span>

</body>

</html>

HELP! How does this work?

the100thballoon

Emperor

the100thballoon

Emperor

Chieftess

Moderator

the100thballoon

Emperor

Similar threads