View Selected Information

Sandeep Gangadharan Jul 13, 2007

General

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.

Make your selection

Notes

Created by: Sandeep Gangadharan
Web Site: http://sivamdesign.com/scripts/
Posted: July 13, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: viewSelectedInfo.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Sandeep Gangadharan | http://sivamdesign.com/scripts/ */
// Topic 1-6 are numbered 0-5 below.
var details=new Array();
details[0] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."
details[1] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."
details[2] = "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li."
details[3] = "Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li."
details[4] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."
details[5] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."
details[6] = "Introduction:\nClick on the radio buttons on the left to learn more about the respective topics!"

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]; }
 }

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  document.texter.text.value=details[6];
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="viewSelectedInfo.js"></script>

Body

Paste this code into the BODY section of your HTML document


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

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details