bubbisthedog
11-20-2007, 02:32 PM
The following markup and code works beautifully in Firefox, but when the second radio button is clicked, the toggling order gets messed up in IE7. How can I get the same functionality in both browsers? (A few clicks should indicate what I'm trying to do; it's very straight-forward. If you have any questions regarding the desired functionality, please ask me.)
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Data Dictionary Reporting | Search</title>
<style type="text/css">
/***********************************PAGE************************************/
* {
margin:0;
padding:0;
font-family:tahoma;
font-size:11px;
}
body {
text-align:center;
}
#page_container {
margin:12px 0 0;
padding:0 8px;
text-align:left;
}
#search_criteria_container {
border:solid 1px rgb(200, 200, 200);
background:rgb(240, 240, 240);
padding:12px;
float:left;
}
.criteria_dropdown {
margin-bottom:4px;
width:94px;
}
#research_item_container {
margin:0 0 10px;
}
#research_item_heading {
font-size:12px;
font-weight:100;
margin:0 0 6px;
}
#research_options_container {
margin:0 0 10px;
}
#research_option_name_container {
margin:0 0 4px;
}
.find_link {
font-size:9px;
color:blue;
}
.criterion_container {
border:solid 1px rgb(200, 200, 200);
background:rgb(250, 250, 250);
margin:8px 0 0;
padding:6px;
}
.close_button_container {
text-align:right;
}
.close_button_container input {
font-weight:bold;
font-size:9px;
border:solid 0px white;
background:white;
color:rgb(120, 120, 120);
cursor:pointer;
}
.close_button_container input:hover {
color:rgb(10, 10, 10);
}
#add_criteria_button_container {
margin:8px 0 0;
text-align:center;
}
#search_button_container {
margin:18px 0 0;
text-align:center;
}
.and_or_container {
margin:12px 0 0;
}
.and_or_selections {
width:46px;
}
#search_button {
width:56px;
font-weight:bold;
}
#results_container {
margin:0 0 0 180px;
border:solid 1px rgb(100, 100, 100);
padding:12px;
width:500px;
}
</style>
<script type="text/javascript">
var singular_item = new Array();
singular_item[1] = 'Report Group';
singular_item[2] = 'Report';
singular_item[3] = 'Calculation';
singular_item[4] = 'Table';
singular_item[5] = 'Field';
var plural_item = new Array();
plural_item[1] = 'Report Groups';
plural_item[2] = 'Reports';
plural_item[3] = 'Calculations';
plural_item[4] = 'Tables';
plural_item[5] = 'Fields';
function changeFindLink(source) {
var on = document.getElementById('research_option_name');
var oi = document.getElementById('research_option_inclusion');
//alert('on:'+on.checked+' oi:'+oi.checked);
if (((on.checked == false) && (oi.checked == true)) || (source == 'research_item')) {
document.getElementById('find_link1').innerHTML = 'Search '+plural_item[(document.getElementById('research_items').selectedIndex)+1];
document.getElementById('find_link2').innerHTML = 'Search '+plural_item[(document.getElementById('research_option_inclusions').selectedIndex)+1];
document.getElementById('find_link3').innerHTML = 'Search '+plural_item[(document.getElementById('research_option_inclusions').selectedIndex)+1];
}
}
function addSearchCriteria() {
found = 'n';
for (i = 1; i <= 2; i++) {
if ((document.getElementById('inclusion'+i+'_container').style.display == 'none') && (found == 'n')) {
document.getElementById('inclusion'+i+'_container').style.display = 'block';
document.getElementById('and_or'+(i-1)+'_container').style.display = 'block';
found = 'y';
}
}
}
function closeCriteriaSection(container_number) {
document.getElementById('inclusion'+container_number+'_container').style.display = 'none';
document.getElementById('and_or'+(container_number-1)+'_container').style.display = 'none';
}
function toggleResearchOptions(page_status) {
var on = document.getElementById('research_option_name');
var oi = document.getElementById('research_option_inclusion');
var nc = document.getElementById('name_container');
var ic = document.getElementById('inclusions_container');
//alert('on:'+on.checked+' oi:'+oi.checked+' nc:'+nc.style.display+' ic:'+ic.style.display);
if (((on.checked == false) && (oi.checked == false)) || (page_status == 'new_page')) {
on.checked = true;
oi.checked = false;
}
if (on.checked == true) {
nc.style.display = 'block';
ic.style.display = 'none';
}
if (oi.checked == true) {
nc.style.display = 'none';
ic.style.display = 'block';
}
}
</script>
</head>
<body onload="toggleResearchOptions('new_page'); changeFindLink('research_item');">
<form id="submittal_form" action="#" method="post">
<div id="page_container">
<!--BEGIN SEARCH CRITERIA CONTAINER//-->
<div id="search_criteria_container">
<div id="research_item_container">
<h4 id="research_item_heading">Item to Research</h4>
<select id="research_items" name="research_items" class="criteria_dropdown" onchange="changeFindLink('research_item');">
<option value="report_group">Report Group</option>
<option value="report">Report</option>
<option value="calculation">Calculation</option>
<option value="table">Table</option>
<option value="field">Field</option>
</select>
</div>
<div id="research_options_container">
<div id="research_option_name_container">
<input type="radio" id="research_option_name" name="research_option" value="" onchange="toggleResearchOptions(''); changeFindLink('');" />
<label for="research_option_name">Search by name</label>
</div>
<div id="research_option_inclusions_container">
<input type="radio" id="research_option_inclusion" name="research_option" value="" onchange="toggleResearchOptions(''); changeFindLink('');" />
<label for="research_option_inclusions">Includes</label>
<select id="research_option_inclusions" name="research_option_inclusions" class="criteria_dropdown" onchange="changeFindLink('');">
<option value="report_group">Report Group</option>
<option value="report">Report</option>
<option value="calculation">Calculation</option>
<option value="table">Table</option>
<option value="field">Field</option>
</select>
</div>
</div>
<div id="name_container" class="criterion_container" style="display:block">
<input type="text" id="name_input" name="name_input" />
<div class="find_link_container">
<a id="find_link1" class="find_link" href="#"></a>
</div>
</div>
<div id="inclusions_container" style="display:none">
<div id="inclusion1_container" class="criterion_container">
<div>
<input type="text" id="inclusion1_input" name="inclusion1_input" />
<div class="find_link_container">
<a id="find_link2" class="find_link" href="#"></a>
</div>
</div>
</div>
<div id="and_or1_container" class="and_or_container" style="display:none">
<select id="and_or1" name="and_or1" class="and_or_selections criteria_dropdown">
<option value="and">and</option>
<option value="or">or</option>
</select>
</div>
<div id="inclusion2_container" class="criterion_container" style="display:none">
<div class="close_button_container">
<input type="button" title="Remove criterion" value="X" onclick="closeCriteriaSection('2');" />
</div>
<div>
<input type="text" id="inclusion2_input" name="inclusion2_input" />
<div>
<a id="find_link3" class="find_link" href="#"></a>
</div>
</div>
</div>
<p id="add_criteria_button_container">
<input type="button" id="add_criteria_button" value="Add Criterion" onclick="addSearchCriteria();" />
</p>
</div>
<div id="search_button_container">
<input type="submit" id="search_button" value="Search" />
</div>
</div>
<!--END SEARCH CRITERIA CONTAINER//-->
<div id="results_container">
content
</div>
</div>
</form>
</body>
</html>
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Data Dictionary Reporting | Search</title>
<style type="text/css">
/***********************************PAGE************************************/
* {
margin:0;
padding:0;
font-family:tahoma;
font-size:11px;
}
body {
text-align:center;
}
#page_container {
margin:12px 0 0;
padding:0 8px;
text-align:left;
}
#search_criteria_container {
border:solid 1px rgb(200, 200, 200);
background:rgb(240, 240, 240);
padding:12px;
float:left;
}
.criteria_dropdown {
margin-bottom:4px;
width:94px;
}
#research_item_container {
margin:0 0 10px;
}
#research_item_heading {
font-size:12px;
font-weight:100;
margin:0 0 6px;
}
#research_options_container {
margin:0 0 10px;
}
#research_option_name_container {
margin:0 0 4px;
}
.find_link {
font-size:9px;
color:blue;
}
.criterion_container {
border:solid 1px rgb(200, 200, 200);
background:rgb(250, 250, 250);
margin:8px 0 0;
padding:6px;
}
.close_button_container {
text-align:right;
}
.close_button_container input {
font-weight:bold;
font-size:9px;
border:solid 0px white;
background:white;
color:rgb(120, 120, 120);
cursor:pointer;
}
.close_button_container input:hover {
color:rgb(10, 10, 10);
}
#add_criteria_button_container {
margin:8px 0 0;
text-align:center;
}
#search_button_container {
margin:18px 0 0;
text-align:center;
}
.and_or_container {
margin:12px 0 0;
}
.and_or_selections {
width:46px;
}
#search_button {
width:56px;
font-weight:bold;
}
#results_container {
margin:0 0 0 180px;
border:solid 1px rgb(100, 100, 100);
padding:12px;
width:500px;
}
</style>
<script type="text/javascript">
var singular_item = new Array();
singular_item[1] = 'Report Group';
singular_item[2] = 'Report';
singular_item[3] = 'Calculation';
singular_item[4] = 'Table';
singular_item[5] = 'Field';
var plural_item = new Array();
plural_item[1] = 'Report Groups';
plural_item[2] = 'Reports';
plural_item[3] = 'Calculations';
plural_item[4] = 'Tables';
plural_item[5] = 'Fields';
function changeFindLink(source) {
var on = document.getElementById('research_option_name');
var oi = document.getElementById('research_option_inclusion');
//alert('on:'+on.checked+' oi:'+oi.checked);
if (((on.checked == false) && (oi.checked == true)) || (source == 'research_item')) {
document.getElementById('find_link1').innerHTML = 'Search '+plural_item[(document.getElementById('research_items').selectedIndex)+1];
document.getElementById('find_link2').innerHTML = 'Search '+plural_item[(document.getElementById('research_option_inclusions').selectedIndex)+1];
document.getElementById('find_link3').innerHTML = 'Search '+plural_item[(document.getElementById('research_option_inclusions').selectedIndex)+1];
}
}
function addSearchCriteria() {
found = 'n';
for (i = 1; i <= 2; i++) {
if ((document.getElementById('inclusion'+i+'_container').style.display == 'none') && (found == 'n')) {
document.getElementById('inclusion'+i+'_container').style.display = 'block';
document.getElementById('and_or'+(i-1)+'_container').style.display = 'block';
found = 'y';
}
}
}
function closeCriteriaSection(container_number) {
document.getElementById('inclusion'+container_number+'_container').style.display = 'none';
document.getElementById('and_or'+(container_number-1)+'_container').style.display = 'none';
}
function toggleResearchOptions(page_status) {
var on = document.getElementById('research_option_name');
var oi = document.getElementById('research_option_inclusion');
var nc = document.getElementById('name_container');
var ic = document.getElementById('inclusions_container');
//alert('on:'+on.checked+' oi:'+oi.checked+' nc:'+nc.style.display+' ic:'+ic.style.display);
if (((on.checked == false) && (oi.checked == false)) || (page_status == 'new_page')) {
on.checked = true;
oi.checked = false;
}
if (on.checked == true) {
nc.style.display = 'block';
ic.style.display = 'none';
}
if (oi.checked == true) {
nc.style.display = 'none';
ic.style.display = 'block';
}
}
</script>
</head>
<body onload="toggleResearchOptions('new_page'); changeFindLink('research_item');">
<form id="submittal_form" action="#" method="post">
<div id="page_container">
<!--BEGIN SEARCH CRITERIA CONTAINER//-->
<div id="search_criteria_container">
<div id="research_item_container">
<h4 id="research_item_heading">Item to Research</h4>
<select id="research_items" name="research_items" class="criteria_dropdown" onchange="changeFindLink('research_item');">
<option value="report_group">Report Group</option>
<option value="report">Report</option>
<option value="calculation">Calculation</option>
<option value="table">Table</option>
<option value="field">Field</option>
</select>
</div>
<div id="research_options_container">
<div id="research_option_name_container">
<input type="radio" id="research_option_name" name="research_option" value="" onchange="toggleResearchOptions(''); changeFindLink('');" />
<label for="research_option_name">Search by name</label>
</div>
<div id="research_option_inclusions_container">
<input type="radio" id="research_option_inclusion" name="research_option" value="" onchange="toggleResearchOptions(''); changeFindLink('');" />
<label for="research_option_inclusions">Includes</label>
<select id="research_option_inclusions" name="research_option_inclusions" class="criteria_dropdown" onchange="changeFindLink('');">
<option value="report_group">Report Group</option>
<option value="report">Report</option>
<option value="calculation">Calculation</option>
<option value="table">Table</option>
<option value="field">Field</option>
</select>
</div>
</div>
<div id="name_container" class="criterion_container" style="display:block">
<input type="text" id="name_input" name="name_input" />
<div class="find_link_container">
<a id="find_link1" class="find_link" href="#"></a>
</div>
</div>
<div id="inclusions_container" style="display:none">
<div id="inclusion1_container" class="criterion_container">
<div>
<input type="text" id="inclusion1_input" name="inclusion1_input" />
<div class="find_link_container">
<a id="find_link2" class="find_link" href="#"></a>
</div>
</div>
</div>
<div id="and_or1_container" class="and_or_container" style="display:none">
<select id="and_or1" name="and_or1" class="and_or_selections criteria_dropdown">
<option value="and">and</option>
<option value="or">or</option>
</select>
</div>
<div id="inclusion2_container" class="criterion_container" style="display:none">
<div class="close_button_container">
<input type="button" title="Remove criterion" value="X" onclick="closeCriteriaSection('2');" />
</div>
<div>
<input type="text" id="inclusion2_input" name="inclusion2_input" />
<div>
<a id="find_link3" class="find_link" href="#"></a>
</div>
</div>
</div>
<p id="add_criteria_button_container">
<input type="button" id="add_criteria_button" value="Add Criterion" onclick="addSearchCriteria();" />
</p>
</div>
<div id="search_button_container">
<input type="submit" id="search_button" value="Search" />
</div>
</div>
<!--END SEARCH CRITERIA CONTAINER//-->
<div id="results_container">
content
</div>
</div>
</form>
</body>
</html>