First you should look at a sample of the application.
This thing is really easy to use.
First make as many radio buttons as you like by just adding
more <input type="radio"... to the
existing pattern, which in the sample (example) looks like this (of course
change the words so they
reflect YOUR content and name the xml files as you like; the 'value' attribute
is actually arbitrary):
<input type="radio" name="Books" value="even" onclick="isXML='true';
clearContent(); getContent('even.xml');" /> Even Numbered Elephants
<input type="radio" name="Books" value="odd" onclick="isXML='true'; clearContent();
getContent('odd.xml');" /> Odd Numbered Elephants
<input type="radio" name="Books" value="prime" onclick="isXML='true';
clearContent(); getContent('prime.xml');" /> Elephants with Prime Numbers
<input type="radio" name="Books" value="small" onclick="isXML='true';
clearContent(); getContent('small.xml');" /> Elephants with Numbers <= 2
<input type="radio" name="Books" value="big" onclick="isXML='true'; clearContent();
getContent('large.xml');" /> Elephants with Numbers > 2
<input type="radio" checked="checked" name="Books" value="none" onclick="clearContent();
clearTable();" /> None
Also, while you are on the index page, make the following line
reflect YOUR domain and folder:
var siteAddr = "http://mynichecomputing.org/AjaxPage/";
(Do all this editing of index.html using a RAW text editing application, like notepad or Very Simple Text for Mac users.)
--------------------------
--------------------------
NOW FOR EACH OF THE RADIO BUTTONS YOU MADE IN YOUR
index.html file, make a xml file FOR
EACH, of the following nature:
<?xml version = "1.0"?>
<covers>
<baseurl>http://mynichecomputing.org/AjaxPage/</baseurl>
<cover>
<content>thisA2.txt</content>
<image>ElephantsA2.jpg</image>
<title>Elephant A2</title>
</cover>
<cover>
<content>thisB2.txt</content>
<image>ElephantsB2.jpg</image>
<title>Elephant B2</title>
</cover>
<cover>
<content>thisC2.txt</content>
<image>ElephantsC2.jpg</image>
<title>Elephant C2</title>
</cover>
<cover>
<content>thisC4.txt</content>
<image>ElephantsC4.jpg</image>
<title>Elephant C4</title>
</cover>
<cover>
<content>thisE2.txt</content>
<image>ElephantsE2.jpg</image>
<title>Elephant E2</title>
</cover>
<cover>
<content>thisF2.txt</content>
<image>ElephantsF2.jpg</image>
<title>Elephant F2</title>
</cover>
</covers>
Obviously, these xml files (which are referred to by the radio button in
index.html) inform the application, the text for the links to make
upon the clicking of a given radio button (this is the element, <title>
...</title>). Also, the CONTENT to appear, more precisely
THE ADDRESS OF the content file for the content to display upon the clicking of
a given LINK is in the various <content> ... </content>
elements! Finally, the <image> ... </image> element of each <cover>
... <.cover> item is the image that one will go to if one selects
a given link and right clicks it (to open an image in a new tab or window).
In each of these xml files, be sure to put YOUR domain and folder for the <baseurl> ... </baseurl> element.
--------------------------
--------------------------
Finally, for each of the <content>... </content> elements
which refer to somename.txt, you need to make
the text files. This is the content or html content that appears in the
area with a border at the bottom of
the application, when any particular link is clicked. THIS FILE, AT IT'S
SIMPLEST, CONSISTS OF JUST A
HTML SEGMENT, SUCH AS THE FOLLOWING:
<div>
Elephant A1
</div>
Really!! As simple as that. To have some raw text retain it's spacing formatting, do the following:
<div>
<blockquote>
Elephant A1
</blockquote>
</div>
ALSO, for uses that know html, ANY HTML THAT CAN APPEAR ON A WEB PAGE
BETWEEN THE <body> ... </body> tags,
can be in the <div>... </div>. IN SHORT, ANY ENTIRE WEB PAGE CAN APPEAR IN
THE BORDERED AREA, UPON
THE CLICKING OF ANY GIVEN LINK!! (If you use regular web page content, use
just that and do not use the <blockquote> tag pair.)
STUDY THE EXAMPLE AND ALL THE CONTENTS OF
THE ZIP WHICH
MAKE THE EXAMPLE PAGE
RUN AND YOU WILL EASILY BE ABLE TO FIGURE OUT WHAT ALL THE BRIEF INSTRUCTIONS
ABOVE MEAN. By the way, this application RUNS FROM ANY WEB SITE -- NO CGI
OR COMMERIAL
FEATURES ARE NEEDED. The pages you call up in the bordered area at the
bottom of the application do
have one limitation, though: ALL THE TXT FILES ("web pages") MUST BE IN YOUR WEB
SITE.
(Unlike many of the applications from this site, this one
runs only from a web server and not from your
desktop. While it will run from any web site (any web server), a web
server is required.)