Menu
I want to use the following script like a page index.
The first radio button display shows the contents for the rest of the buttons
The other buttons will be filled in with the contents of its topic.
The program works fine …. except:
The Schedule page left side does not line up with the right side.
It is slightly off, and becomes more off with longer lists.
I believe the cause is that the radio button displays are slightly bigger
than lines with text only. I’ve tried using a style of ‘line-height:xxx’
with different values of ‘xxx’ but I cannot make it truly line up left to right.
I’m not sure if this is a javascript problem or a CSS problem.
Any ideas how I can make the left=right side in vertical height size? ?
Or should I post the question on the CSS forum?
[code=php]
<html>
<head>
<title>Line-Up Lines</title>
<script type=”text/javascript”>
var details = new Array();
var str = ”;
str = ‘Schedule::Choose week of interest’; details[0] = str;
str = ‘Week 1: 1/3 ::Introduction / Case History::More Stuff’; details[1] = str;
str = ‘Week 2: 1/10 ::Visual Acuities::::Distance::Near’; details[2] = str;
str = ‘Week 3: 1/17 ::Color Vision / Stereopsis’; details[3] = str;
str = ‘Week 4: 1/24 ::Hand Neutralization / Autorefraction’; details[4] = str;
str = ‘Week 5: 1/31 ::NPC::NPA::Amp::Versions’; details[5] = str;
str = ‘Week 6: 2/7 ::Patient Observation’; details[6] = str;
str = ‘Week 7: 2/14 ::Professional Communications’; details[7] = str;
str = ‘Week 8: 2/21 ::Confrontation Visual Fields/PD’; details[8] = str;
str = ‘Week 9: 2/28 ::Role Playing’; details[9] = str;
str = ‘Week 10: 3/6 ::Mid terms / No class’; details[10] = str;
str = ‘Week 11: 3/13::Proficiencies/No Class’; details[11] = str;
str = ‘Week 12: 3/20::Spring Break’; details[12] = str;
str = ‘Week 13: 3/27::Open Practice Lab’; details[13] = str;
str = ‘Week 14: 4/3 ::Non-Contact Tonometry’; details[14] = str;
str = ‘Week 15: 4/10::Review / Stamps’; details[15] = str;
str = ‘Week 16: 4/17::Final in Class (all assignments due)’; details[16] = str;
str = ‘Contact Us::Email’; details[17] = str;
tmp = new Array();
str = ”;
for (i=0; i<details.length; i++) {
tmp = details[i].split(‘::’);
str += tmp[1]+'<br />’;
}
details[0] = ‘Schedule::’ + str; // special adjustment for first entry only
function ShowDetails(n) {
var str = details[n]; // alert(str);
var tmp = str.split(‘::’);
tmp.shift();
str = tmp.join(‘<br />’);
return str;
}
function topica(msg) {
document.getElementById(‘TA’).innerHTML = ShowDetails(msg);
}
</script>
</head>
<body onLoad=”topica(0)”>
<TABLE border=”1″ width=”100%”><TR>
<TH width=”65%”>
<fieldset style=”background-color:#ffffcc;”>
<legend><strong>Clinical Optometric Procedures:</strong></legend>
<table width=”100%”> <!– style=”padding: 5px 5px 5px 5px;” –>
<tr>
<td valign=”top” width=”25%”>
<script type=”text/javascript”>
var tmp = new Array();
var str = ”;
for (var i=0; i<details.length; i++) {
tmp = details[i].split(‘::’);
str += ‘<label for=”t’+i+'”><input type=”radio” id=”t’+i+'” name=”point”‘;
str += ‘ onClick=”topica(‘+i+’);” /><span id=”s’+i+'”>’+tmp[0]+'</span></label>’;
str += ‘<br />’;
}
document.write(str);
</script>
</td>
<td valign=”top”>
<div id=”TA” style=”border: none; margin-left: 5px;”> <!– line-height:1.3″ works, sorta –>
</div>
</td>
</tr></table>
</fieldset>
</TH>
<TH>
Calendar will go here
</TH>
</TR></TABLE>
</body>
</html>