Forum Moderators: open
I'm trying to write an index/glossary page. I want each of the a - z topics to come up in one set of div's, and when you click on a link within that tag, it'll bring up the definition/location in another div.
I've used CSS to give the two div sets a class, which takes care of positioning, and allows me to use the id tag to hide/show them. I've tried to use the show/hide layers option in Dreamweaver, but its a hellish mess in the programming - I'd like something simpler. I've trawled several websites and found two functions that almost do what I want, but I can't programme Javascript, so I can't join them together! They are:
states=new Array()
states[0]="a"
states[1]="b"
states[2]="c"
states[3]="d"
states[4]="e"
states[5]="f"
states[6]="g"
function hideAllExcept(elm) {
for (var i = 0; i < states.length; i++) {
var layer = document.getElementById(states[i]);
if (elm!= states[i]) {
layer.style.display = "none";
}
else {
layer.style.display = "block";
}
}
}
and
function hidedivs() {
var els = document.getElementsByTagName( 'div' );
var num = els.length;
for( var i = 0; i<num; i++ ) {
if( els[i].id.indexOf( 'div_' )===0 ) {
els[i].style.display = 'none';
}
}
}
With the HideAllExcept function, I don't want to list the 'states' separately - as you can imagine with an a - z this could an immense list!
What I would like is for the HideAllExcept function to call the hidedivs function as the variable for 'states'. In other words, I want to call all the divs with their ids starting with 'div_', then show one while hiding all the rest.
I hope that makes sense, and that someone can help a poor damsel in distress! ;-)
You may want to consider having an HTTPRequest function look up a page, based on a selected letter, and inject it into an innerHTML property of the "Definition Div."
Its for a website that will be run off CD (don't ask!), will that make any difference to using AJAX?
(don't ask!)
Ah, but I must.
I assume that this is like HTML documentation, with a set of HTML pages on a CD that is run by the user. Many applications come with help and manuals in this fashion.
AJAX is not as complex as you might think. I'll SM you something that makes it quite simple to use.
Basically, all AJAX does is send a query to the server, in exactly the same way as a normal page load, but without going through an entire page reload. There are a few restrictions, but calling local HTML files without going to a server is a breeze. Far simpler than most AJAX implementations. You would probably have something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>AJAX Lookup</title>
<!-- NOTE: Make a local copy of this! -->
<script src="<REDACTED FOR WebmasterWorld -I'll SM IT TO YOU>" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
function SimpleAJAXCallback(in_text){
document.getElementById('textWindow').innerHTML=in_text;
}
// ]]>
</script>
</head>
<body id="theBody">
<form id="letters" action="#" method="get"><div id="letters">
<ul class="letterlist">
<li class="letter"><input type="button" onclick="SimpleAJAXCall('file_A.txt',SimpleAJAXCallback)" value="A" /></li>
<li class="letter"><input type="button" onclick="SimpleAJAXCall('file_B.txt',SimpleAJAXCallback)" value="B" /></li>
</ul>
</div>
<div id="textWindow"></div>
</body>
</html><!-- This is what is in "A" and "B":
file_A.txt: -> "This is the contents of 'A'"
file_B.txt: ->'This is the contents of 'B'"-->
You would have a set of files; one for each letter, with some simple HTML in each one. This HTML would be displayed in the "textWindow" element as the link was clicked.
I'll work up a more comprehensive demo and SM it to you. It requires the AJAX Queue Class I wrote, and which you are welcome to use. It's the simplest AJAX implementation I've ever seen.
Thanks for that - worked great!
Sorry to take so long to reply, I access the internet at work only and its been a busy few days!
