View Selected Information

Make your selection

Display information in a very compact manner in order to save space on your Web pages. When any radio button is selected, its corresponding information is automatically displayed in the area to the right. Highly customizable.

We have tested the code in IE 7.0, Firefox 2.0.0.5, Opera 9.21, Opera 9.22, Netscape 9.0b2, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with one (1) variation observed in Netscape 8.1.3.

The effect itself has no variation, it is Netscape 8.1.3 that does not play well with this effect surrounded by side by side tables. In other words, the text we have to the right of this effect overlaps into the effect itself.
[ See Example Here ]
Workaround would be not to have this effect enclosed by any table other than the one the effect is in and any other information should be either above or below the effect.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in the <BODY> section (anywhere you want the effect to appear) of your document. It also makes use of an external .js file you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

// Topic 1-6 are numbered 0-5 below.
var details=new Array();
details[0] = "Your Text Here."
details[1] = "Your Text Here."
details[2] = "Your Text Here."
details[3] = "Your Text Here."
details[4] = "Your Text Here."
details[5] = "Your Text Here."
details[6] = "Introduction:\nYour Instructions Here!"

function topica() {
if (document.texter.point[0].checked) { document.texter.text.value=details[0]; }
if (document.texter.point[1].checked) { document.texter.text.value=details[1]; }
if (document.texter.point[2].checked) { document.texter.text.value=details[2]; }
if (document.texter.point[3].checked) { document.texter.text.value=details[3]; }
if (document.texter.point[4].checked) { document.texter.text.value=details[4]; }
if (document.texter.point[5].checked) { document.texter.text.value=details[5]; }
}

As you can notice in the code to the left, just follow the sequence to add more than the default.
Pay particular attention to details[6] or the last number in the sequence. This is where your instructions will appear. Once you click on any of the other choices, the instructions are not going to reappear unless you refress the page. Also notice the \n. This denotes a line break. It works the same as a <br> tag in HTML but the <br> tag will not work in javascript.

Notice in this section there are six (6) lines of code as opposed to seven (7) in the first above section. Reason being is that these call the six (6) topics that you see in this effect and not the instructions that only appear until a topic is selected. If you would like to add the instruction or introduction as a selection as we have in the example, just follow the format and list the introduction as a topic or selection.

<fieldset style="width: 400px;">
<legend><strong>Make your selection</strong></legend>
<form name="texter">
<table style="padding: 10px 10px 0 10px;">
<tr><td valign="top" class="smaller" width="100">
<input type="radio" name="point" onClick="topica();">Topic 1<br>
<input type="radio" name="point" onClick="topica();">Topic 2<br>
<input type="radio" name="point" onClick="topica();">Topic 3<br>
<input type="radio" name="point" onClick="topica();">Topic 4<br>
<input type="radio" name="point" onClick="topica();">Topic 5<br>
<input type="radio" name="point" onClick="topica();">Topic 6<br>
<input type="radio" name="point" onClick="topica();">Instructions<br>

</td><td>
<textarea name="text" rows="6" cols="30" wrap="virtual" style="border: none; margin-left: 20px;"></textarea>
</td></tr>
</table>
</form>
</fieldset>

Where we have the Topic listed is where you will change that to the name of the topics you need.

Notice the opening and closing <fieldset> </fieldset> tags. This is for the border around the effect. If you do not want this, then just remove those two (2) lines of code.

rows="6" This denotes how high from top to bottom the textarea will be
cols="30" This denotes how wide from side to side the textarea will be

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="viewSelectedInfo.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

O nce you have completed either of the above steps for the <HEAD> section, all that is left is to paste the <BODY> section of code where you want the effect to appear.

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/viewselectedinfo.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/viewselectedinfo.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]