PDA

View Full Version : Mystery flicker

h8ids
09-28-2006, 07:37 PM
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:

<!-- 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>&nbsp;&nbsp;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>

&nbsp;<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">
&nbsp;<input type="button" value="Delete" name="MajorDelete"></td>
</tr>

<tr>
<td>&nbsp;&nbsp;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>

&nbsp;<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">
&nbsp;<input type="button" value="Delete" name="MinorDelete"></td>
</tr>

<tr bgcolor='#E0E0E0'><td>&nbsp;&nbsp;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>
&nbsp;<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">
&nbsp;<input type="button" value="Delete" name="ConcenDelete"></td>
</tr>

<tr>
<td>&nbsp;&nbsp;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>

&nbsp;<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">
&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>


The .js file:
//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="";
}
A1ien51
09-29-2006, 01:24 AM
Because when the page renders they are visible and when the page completes loading you hide them. Set the CSS of the elements to start out with to none and you will not see them!

Eric
h8ids
09-29-2006, 03:50 PM
A1ien51,

Will look into it!
Thanks:thumbsup:
h8ids
09-29-2006, 08:07 PM
I did set visibility to 'hidden'.
But JavaScript doesn't make the fields visible when called upon.
h8ids
10-04-2006, 09:01 PM
Found what you were refering to; example code.

<div id="MajorEdit" name="MajorEdit" style='display: none'>