Jump to content

Visibility Bug

Nodral

By Nodral
in CSS Help

 Share

Recommended Posts

Nodral Regular Member

Nodral

Posted
Posted

Hi All

 

Not sure if this will sit with CSS or Javascript as it's a bit of both.  This code works fine in FF but in IE7 (which most of my audience use) it has issues.

 

The process should be that the user clicks the first button and it hides the first and shows the second.  The user clicks the second button and it hides the second and shows an input form.

 

However I have 3 issues which I cannot understand.

 

[*]The main 500 line input form shows from the start in IE7 even thought the visibility is set to hidden until the button is pressed.

[*]I cannot set the cell width in the input form regardless of what px i put in, it stays the same (this occurs in FF too)

[*]In IE, when the form is finally set to visible, I get borders around the text input fields, again these are set to hidden

 

See code below




<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

   <script language="javascript" type="text/javascript">

   

   //Countdown Clock JS script

  var c=600;

  var t;

  function timedCount(){

	  //convert c to mins + secs

	  minVar = Math.floor(c/60);  

	  if (c % 60==0)

	  {secVar="00";

	  }

	  else {secVar = c % 60;}

	  document.getElementById('txt').value= minVar + ":" + secVar;

	  c=c-1;

	  t=setTimeout("timedCount()",1000);

	  if (c<=-1)

	  {

		  alert('Out of time');

		  c=200;

		  stopCount();

		  //submit on timeout

		  document.forms["data"].submit();

		  


	  }

	  }

	  

	  function stopCount(){

		  clearTimeout(t);

		  }



  // hide the download button and show the 'start test' button

  function hide() {

	  document.getElementById('download').style.visibility  = "hidden";

	  document.getElementById('test').style.visibility  = "visible";


  }

// hide the start test button and show the test form

  function show() {

	  document.getElementById('form_input').style.visibility  = "visible";

	  document.getElementById('test').style.visibility  = "hidden";

	  

	  

	  

	  

  }

  </script>


 <?php

//create form for input

?><style language="text/css">


table{

	border-collapse:collapse;

}


#input

{

	border:none;

}


#clock {

  border:3px solid red;

  background-color:yellow;

  font-family:verdana;

  font-size:16pt;

  font-weight:bold;

  position:fixed;

  top:10px;

  right:30px;

  margin-left:auto;

  margin-right:auto;

  width:200px;

  z-index:1000;


}


#txt {

  border:none;

  background-color:yellow;

  font-family:verdana;

  font-size:16pt;

  font-weight:bold;

  width:70px;

  }


td{

	text-align:center;

	border:solid black 1px;

}

img{

	text-decoration:none;

	border-style:none;

}


#form_input{

	visibility:hidden;		

	position:absolute;

	top:163px;

	z-index:100;


}


#test{

	visibility:hidden;

	position:absolute;

	top:0px;

}


#download{

	visibility:visible;

	position:absolute;

	top:0px;

}


#header{

	position:fixed;

	top:0px;

	z-index:20;

}

#cell{


}


#number{

	background-color:#EFEBDE;

	font-size:12px;

	width:23px;

	border-left:2px solid #715F64;

}

#country{

	width:80px;

}


</style>

</head>

<body>


<?php 

// process the info and display if test is completed

if(isset($_POST['form_submit'])){

	echo "hello, the answer is " . $_POST['country1'];


// $_POST['country'number'']

// $_POST['accriss']

// $_POST['cost']

// $_POST['account']




}

else

{

?>





<div id="button">

</div>

<div>

<!-- button images-->

<a href='download.php' onClick="hide()"><img id="download" src='button.png'><a href='#' onClick="show(); timedCount();"><br><img id="test" src='button2.png'></a> 

</div>






	</div>

<div id="form_input">

<img id="header" src="header.png">

<div id="clock">

Time Left<br>

<form><input type="text" id="txt"></div></form>

<!-- create the answer form-->

<form id="data" method="POST" action="">

<input type="hidden" name="form_submit" value="yes">


<table>

<tr><td id="number">&nbsp</td><td id="country">Country</td><td id="accriss">Acriss Code</td><td id="cost">Cost</td><td id="account">Account Number</td></tr>

<?php

for ($i=1; $i<=500; $i++){

	?>

	<tr><td id="number"><?php echo $i; ?></td>

	<td id="country"><input id="input" type="text" name='country<?php echo"$i"; ?>'></td>

	<td id="accriss"><input id="input" type="text" name='accriss<?php echo"$i"; ?>'></td>

	<td id="cost"><input id="input" type="text" name='cost<?php echo"$i"; ?>'></td>

	<td id="account"><input id="input" type="text" name='account<?php echo"$i"; ?>'></td></tr>

	<?php

}

?>

</table>

</form>

</div>

<?php } ?>











			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
    
         https://forums.phpfreaks.com/topic/248881-visibility-bug/
    

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






					
					
					
				
			
			



		

	


	
	
	
	
	
		
	
      
This thread is more than a year old. Please don't revive it unless you have something important to add.

			
				
				

	
		

			
Join the conversation

			

	
				
					You can post now and register later.
				
				If you have an account, sign in now to post with your account.
				
			

	
		

	




	
	
		
	
		
	
		
	
	
		
		
	
	

		

		


	
		Guest
	


		

			
				
					
				
					
						
    
							
  • 
								


	
	
	
	

								
							
    • 
						

					
				
					
				
			
			
				
					
						
							
						
						



    

		
		

			
		

		
			
 Reply to this topic...

		
		

			

				
					×
					  Pasted as rich text.   Restore formatting
				
			

		

		

			

				  Only 75 emoji are allowed.
			

		

		

			

				×
				  Your link has been automatically embedded.   Display as a link instead
			

		

		

			

			

		

		

			

				×
				  Your previous content has been restored.   Clear editor
			

		

		

			

				×
				  You cannot paste images directly. Upload or insert images from URL.
			

		

		
	

		
	

	

	

		

			×
			
		

		

	



						
					
				
					
				
					
				
			
			
    
				
					
						
					
						
					
						
							
  • 
								


    
	

    

								
							
    • 
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			

				
					


    
          Share
    

    

				
				
                

                


				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	



		






















	

		

			
Important Information

			
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.