Tweet
Mystery flicker
Not certain why my JavaScript code is creating a flicker of hidden fields.
Perhaps it's the loading sequence???? I do have a reference to a .js file along with JS code in the page.
Here's the page code:
The .js file:
Perhaps it's the loading sequence???? I do have a reference to a .js file along with JS code in the page.
Here's the page code:
Code:
<!-- Form Border image, date and registrar contact -->
<div style="position: absolute; left: 5%;">
<HTML>
<HEAD>
<title>Database edit page</title>
<META NAME="EXPIRES" CONTENT="Mon, 01 Jan 2000 12:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script src="javascript.js"></script>
</HEAD>
<body topmargin="0" marginheight="0" onload="hidden()">
<!-- Form Border image and -->
<div style="position: absolute; left: 5%;">
<!-- Beginning of form input -->
<!-- Menu -->
<FORM name="form3" enctype="multipart/form-data">
<div style="position: absolute; left: 60px; top: 50px; width:150px; z-index:8" class="navmenu_lightblue">
<p><a onmousedown="show_me('Nothing')"></a>
<p><a onmousedown="show_me('Edit')"></a>
<p><a onmousedown="show_me('Add')"></a>
</div>
<!-- Table positioning -->
<div style="position: absolute; width: 635px; left: 40px; top: 85px; z-index:1">
<table width='631' cellspacing='0'>
<thead bgcolor='lightyellow'>
<tr><th>Editable tables</th><th colspan='3'>
</thead>
<tr bgcolor='#E0E0E0'>
<td> Majors.<br></td>
<td><select size="1" name='MajorChoice' id='MajorChoice' style='background-color: lightyellow' onchange="getMajorChoice(this.value); show('MajorEdit'); hide('MinorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MajorAdd'); hide('MinorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0">
<option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="American Studies">American Studies</option><option style='background-color: lightyellow' value="Anglican Studies">Anglican Studies</option></select></td><td>
<input type="button" value="Add" name="MajAdd" id="Add" onclick="hide('MajorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('TheologyAdd'); show('MajorAdd'); document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MajorChoice').selectedIndex=0">
<input type="button" value="Delete" name="MajorDelete"></td>
</tr>
<tr>
<td> Minors.<br></td>
<td><select size="1" name='MinorChoice' id='MinorChoice' size=30 style='background-color: lightyellow' onchange="getMinorChoice(this.value); show('MinorEdit'); hide('MajorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorAdd'); hide('MajorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0">
<option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Anthropology">Anthropology</option><option style='background-color: lightyellow' value="Art History">Art History</option><option style='background-color: lightyellow' value="Asian Studies">Asian Studies</option></select></td><td>
<input type="button" value="Add" name="MinAdd" id="Add" onclick="hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); show('MinorAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0">
<input type="button" value="Delete" name="MinorDelete"></td>
</tr>
<tr bgcolor='#E0E0E0'><td> Concentrations.<br></td>
<td><select size="1" name='ConcenChoice' id='ConcenChoice' size=30 style='background-color: lightyellow' onchange="getConcenChoice(this.value); show('ConcenEdit'); hide('MajorEdit'); hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenAdd'); hide('MajorAdd'); hide('MinorAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0">
<option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Education">Education</option><option style='background-color: lightyellow' value="Womens Studies">Womens Studies</option></select>
WMST</td><td>
<input type="button" value="Add" name="ConcAdd" id="Add" onclick="hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); show('ConcenAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0">
<input type="button" value="Delete" name="ConcenDelete"></td>
</tr>
<tr>
<td> School of Theology majors.<br></td>
<td><select size="1" name='TheolChoice' id='TheolChoice' size=30 style='background-color: lightyellow' onchange="getTheolChoice(this.value); show('TheologyEdit'); hide('ConcenEdit'); hide('MinorEdit'); hide('MajorEdit'); hide('TheologyAdd'); hide('ConcenAdd'); hide('MinorAdd'); hide('MajorAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0">
<option style='background-color: lightyellow' value="Please Choose One">Please Choose One</option><option style='background-color: lightyellow' value="Bible">Bible</option><option style='background-color: lightyellow' value="Christian Ethics Moral Theology">Christian Ethics Moral Theology</option></select></td><td>
<input type="button" value="Add" name="TheolAdd" id="Add" onclick="hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); show('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0">
<input type="button" value="Delete" name="TheologyDelete"></td>
</tr>
<tfoot bgcolor='lightyellow'><tr><td colspan='4'></td></tfoot>
</table>
<!--------------------------Major choice capture-------------------------------->
<script type="text/javascript">
//Major
function getMajorChoice(isMajorChoice){
if (isMajorChoice != 'null')
{
document.forms[0].nEmp1.value = isMajorChoice;
}
}
//Minor
function getMinorChoice(isMinorChoice){
if (isMinorChoice != 'null')
{
document.forms[0].nEmp2.value = isMinorChoice;
}
}
//Concentration
function getConcenChoice1(isConcenChoice1){
if (isConcenChoice1 != 'null')
{
document.forms[0].ConcentrationCode.value = isConcenChoice1;
}
}
function getConcenChoice(isConcenChoice){
if (isConcenChoice != 'null')
{
document.forms[0].nEmp3.value = isConcenChoice;
}
}
//Theology
function getTheolChoice(isTheolChoice){
if (isTheolChoice != 'null')
{
document.forms[0].nEmp4.value = isTheolChoice;
}
}
alert("Edit data information by selecting it from the respective drop-down box.");
</script>
<!-- Major -->
<div id="MajorAdd">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Add</b> a new Major.</td>
<!-- Add major input box -->
<td><input type="text" style="background-color: lightyellow" id="MajorsCode" name="MajorsCode" size="4" maxlength="4"></td>
<td><input type="text" style="background-color: lightyellow" id="Majors" name="Majors" size="55" maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<a title="Add Major" href="DBAddMajor.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Add new Major" name="Add new Major" title="Add new Major"></a></td>
</tr>
</table>
</div>
<div id="MajorEdit" name="MajorEdit">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Edit</b> a Major name.</td>
<!-- Edit major input box -->
<td><input type="text" size="4"></td><td>
<input type="text" size="55" id="Chosen" name='nEmp1' maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<!-- Submit editted major button -->
<a title="Add new Theology Major" href="DBEditMajor.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Save revisions" name="MajorEdit" title="Store revised Major"></a></td>
</tr>
</table>
</div>
<!-- Minor -->
<div id="MinorAdd"><table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Add</b> a new Minor.</td>
<!-- Add minor input box -->
<td><input type="text" style="background-color: lightyellow" id="MinorCode" name="MinorCode" size="4" maxlength="4"></td>
<td><input type="text" style="background-color: lightyellow" id="Minors" name="Minors" size="55" maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<a title="Add new Minor" href="DBAddMinor.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Add new Minor" name="Add new Minor" title="Add new Minor"></a></td>
</tr>
</table>
</div>
<div id="MinorEdit" name="MinorEdit">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Edit</b> a Minor name.</td>
<!-- Edit minor input box -->
<td><input type="text" size="4" maxlength="4"></td>
<td><input type="text" size="55" id="Chosen" value="" name='nEmp2' maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<!-- Submit editted minor button -->
<a title="Add new Theology Major" href="DBEditMinor.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Save revisions" name="MinorEdit" title="Store revised Minor"></a></td>
</tr>
</table>
</div>
<!-- Concentration -->
<div id="ConcenAdd">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Add</b> a new Concentration.</td>
<!-- Add concentration input box -->
<td><input type="text" style="background-color: lightyellow" id="ConcentrationCode" name="ConcentrationCode" size="4" maxlength="4"></td>
<td><input type="text" style="background-color: lightyellow" id="Concentrations" name="Concentrations" size="55" maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<a title="Add Concentration" href="DBAddConcen.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Add Concentration" name="Add Concentration" title="Add Concentration"></a></td>
</tr>
</table>
</div>
<div id="ConcenEdit" name="ConcenEdit"><table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Edit</b> a Concentration name.</td>
<!-- Edit concentration input box -->
<td><input type="text" size="4" maxlength="4"></td>
<td><input type="text" id="Chosen" value="" name='nEmp3' size="55" maxlength="50">
</td>
</tr>
<tr><td></td><td colspan="2">
<!-- Submit editted concentration button -->
<a title="Add Theology Major" href="DBEditConcen.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Save revisions" name="ConcentrationEdit" title="Store revised Concentration"></a></td>
</tr>
</table>
</div>
<!-- Theology options -->
<div id="TheologyAdd" name="TheologyAdd">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Add</b> a new Theology major.</td>
<!-- Add theology input box -->
<td><input type='text' style='background-color: lightyellow' id='theologycode' name='theologycode' size='4' maxlength='4'></td>
<td><input type='text' style='background-color: lightyellow' id='theology' name='theology' size='55' maxlength='50'></td>
</tr>
<tr><td></td><td colspan="2">
<a title="Add Theology Major" href="DBAddTheology.php" style="text-decoration: none; color: #000000;">
<input type='submit' value='Add Theology Major' name='Add Theology Major' title='Add Theology Major'></a></td>
</tr>
</table>
</div>
<div id="TheologyEdit" name="TheologyEdit">
<table cellspacing="0">
<tr><td width="200"></td><td>Code:</td><td>Title:</td></tr>
<tr><td> <b>Edit</b> a Theology major name.</td>
<!-- Edit theology input box -->
<td><input type="text" size="4"></td>
<td><input type="text" size="55" id="TheologyEdit" value="" name='nEmp4' maxlength="50"></td>
</tr>
<tr><td></td><td colspan="2">
<!-- Submit editted theology button -->
<a title="Add new Theology Major" href="DBEditTheology.php" style="text-decoration: none; color: #000000;">
<input type="submit" value="Save revisions" name="TheologyEdit" title="Store revised Theology major"></a></td>
</tr>
</table>
</div>
</form>
</div>
</div>
</body>
</html>
Code:
//Hidden fields
function hidden(){
MajorAdd.style.display="none";
MajorEdit.style.display="none";
MinorAdd.style.display="none";
MinorEdit.style.display="none";
ConcenAdd.style.display="none";
ConcenEdit.style.display="none";
TheologyAdd.style.display="none";
TheologyEdit.style.display="none";
}
//Major
function hide(){
var MajorEdit = document.getElementById(arguments[0]);
MajorEdit.style.display="none";
}
function show(){
var MajorEdit = document.getElementById(arguments[0]);
MajorEdit.style.display="";
}
//Minor
function hide(){
var MinorEdit = document.getElementById(arguments[0]);
MinorEdit.style.display="none";
}
function show(){
var MinorEdit = document.getElementById(arguments[0]);
MinorEdit.style.display="";
}
//Concentration
function hide(){
var ConcenEdit = document.getElementById(arguments[0]);
ConcenEdit.style.display="none";
}
function show(){
var ConcenEdit = document.getElementById(arguments[0]);
ConcenEdit.style.display="";
}
//Theology
function hide(){
var TheologyEdit = document.getElementById(arguments[0]);
TheologyEdit.style.display="none";
}
function show(){
var TheologyEdit = document.getElementById(arguments[0]);
TheologyEdit.style.display="";
}
Comment