Web Analytics Made Easy -
StatCounter Mystery flicker - CodingForum

Announcement

Collapse
No announcement yet.

Mystery flicker

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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:
    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:
    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="";
    }

  • #2
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

    Comment


    • #3
      A1ien51,

      Will look into it!
      Thanks

      Comment


      • #4
        I did set visibility to 'hidden'.
        But JavaScript doesn't make the fields visible when called upon.

        Comment


        • #5
          Found what you were refering to; example code.

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

          Comment

          Working...
          X