|
|
Copied To Clipboard!
<!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 https://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 https://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>
|
