Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Miscellaneous Snippets >> Topic Box Radio Input Selector


Code Snippet </> Info


Snippet Name: Topic Box Radio Input Selector

Description: Add a topic box that flips information in a DIV according to the radio button selected.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-12-13 06:44:36

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <title>Topic Box Radio Input Selector</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> /* Begin Input Box Glow Effect */ /* This Script Free To Use Providing This Notice Remains */ /* This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library */ body {font-family:verdana,arial,ms sans serif; font-size:90%;color:#000000;background:#ffffff;text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #content {margin:0; padding:5px 5px 5px 5px;} .SnapTable {width:600px; height:125px; border:#e6e6e6 inset 1px; background-color:#e6e6e6; box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.5);} .RightBorder {border-right:#e6e6e6 solid 0px; background-color:#aaaaaa;} input {font-size:12px;font-family:verdana,arial,ms sans serif;} input {outline:none;transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid rgba(0,0,0, 0.2);color:#dddddd;background-color:#eeeeee;padding:3px;} input:focus {box-shadow:0 0 15px #007730;-webkit-box-shadow:0 0 15px #007730;-moz-box-shadow:0 0 15px #007730;border:1px solid #007730;background-color:#ffffff;} .datastyle {margin:0; padding:0; width:500px; height:125px; overflow-y:scroll; text-align:left; background-color:#aaaaaa;} .text {margin:0; padding:2px 5px 2px 5px;} </style> <script> <!-- // Begin Topic Box Radio Input Selector // == This Script Free To Use Providing This Notice Remains == // // == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == // // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // var details=new Array(); details[0] = "<p class=\"text\"><strong>Topic 1:</strong> Details about topic #1 will be shown here.</p>" details[1] = "<p class=\"text\"><strong>Topic 2:</strong> Details about topic #2 will be shown here.<br><br>This box shows an embedded <a href=\"http:\/\/snapbuilder.com\" target=\"_new\">text link</a> code.</p>" details[2] = "<p class=\"text\"><strong>Topic 3:</strong> Details about topic #3 will be shown here.</p>" details[3] = "<p class=\"text\"><strong>Topic 4:</strong> Details about topic #4 will be shown here.<br><br>This box shows an embedded font class=\'name\' " details[4] = "<p class=\"text\"><strong>Topic 5:</strong> Details about topic #5 will be shown here.</p>" details[5] = "<p class=\"text\"><strong>Topic 6:</strong> Details about topic #6 will be shown here.</p><br><p class=\"text\">This has more text content to show you the div overflow auto scroll.</p><br><p class=\"text\">This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p><br><p class=\"text\">This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p><br><p class=\"text\">This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>" function SnapTopic(exp) { if (document.SnapText.point[exp].checked) {document.getElementById('SnapData').innerHTML=details[exp];} } // --> </script> </head> <body> <div id="content"> <h3 align="center">Topic Box Radio Input Selector</h3> <center> <form name="SnapText"> <table cellspacing="0" cellpadding="2" class="SnapTable"> <tr> <td width="100" height="125" class="RightBorder"> <input type="radio" name="point" onClick="SnapTopic(0);" />Topic 1<br /> <input type="radio" name="point" onClick="SnapTopic(1);" />Topic 2<br /> <input type="radio" name="point" onClick="SnapTopic(2);" />Topic 3<br /> <input type="radio" name="point" onClick="SnapTopic(3);" />Topic 4<br /> <input type="radio" name="point" onClick="SnapTopic(4);" />Topic 5<br /> <input type="radio" name="point" onClick="SnapTopic(5);" />Topic 6<br /> </td> <td> <div id="SnapData" class="datastyle"> <p class="text">This is your introductory text!</p> <p class="text"><br>Check out topics for various HTML examples.</p> <p class="text"><br>Check out Topic 6 to see DIV overflow scrolling.</p> </div> </td> </tr> </table> </form> </center> <div align="center">Click the Topic radio buttons above for an example.</div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library