• Locked
No replies
Tue, 2011-10-11 14:25
Nodral
Nodral's picture
Offline
Last seen: 1 year 31 weeks ago
newbie
Timezone: GMT+1
Joined: 2011-10-11
Posts: 1
Points: 2

Hi

I have created a fairly basic page using HTML CSS and Javascript which renders and works brilliantly in FF. However my main audience will be in IE7 and I have issues with a table not being hidden until the Javascript changes it to Visible.

any ideas?

<!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" src="input.js"></script>
   <link rel="stylesheet" type="text/css" href="input.css" />
</head>
 
<body onkeydown="if (event.keyCode==13) {event.keyCode=9; return event.keyCode }">
<?php 
// process the info and display if test is completed
if(isset($_POST['form_submit'])){
	include('results.php');
}
else
{
?>
<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-->
<div id="table">
<form id="data" method="POST" action="results.php" onsubmit="return false">
<input type="hidden" name="form_submit" value="yes">
<script>document.writeln('<input type="hidden" name="total_time" value="'+totalTime+'">')</script>
 
<table>
<tr id="top"><td id="number">&nbsp</td><td id="country">A</td><td id="accriss">B</td><td id="cost">C</td><td id="account">D</td></tr>
<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"; ?>]' autocomplete="off"></td>
	<td id="accriss"><input id="input" type="text" name='accriss[<?php echo"$i"; ?>]' autocomplete="off"></td>
	<td id="cost">&pound<input id="input" type="text" name='cost[<?php echo"$i"; ?>]'></td autocomplete="off">
	<td id="account"><input id="input" type="text" name='account[<?php echo"$i"; ?>]' autocomplete="off"></td></tr>
	<?php
}
?>
</table>
</form>
</div>
</div>
<?php } ?>

CSS - 

#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;
 
}
body{
	background-color:#C0C0C0;
}
#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:147px;
	z-index:100;
	background-color:white;
 
}
 
#test{
	visibility:hidden;
	position:absolute;
	top:300px;
}
 
#download{
	visibility:visible;
	position:absolute;
	top:300px;
}
 
#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;
}
 
#top{
	background-color:#EFEBDE;
	font-size:12px;
}
 
#paragraph{
visibility:visible;
}
 
table{
	border-collapse:collapse;
	border-color:#715F64;
}

Javascript - 

 //Countdown Clock JS script
  //set time on clock in seconds
 
  var c=30;
  var totalTime= c;
  var t;
  function timedCount(){
	  //convert c to mins + secs
	  minVar = Math.floor(c/60);  
	  if (c % 60==0)
	  {secVar="00";
	  }
	  else if (c % 60<=9)
	  {
		  secVar="0" + c %60;
	  } 
	  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";
	  document.getElementById('form_input').style.visibility  = "hidden";
 
  }
// hide the start test button and text and show the test form
  function show() {
	  document.getElementById('form_input').style.visibility  = "visible";
	  document.getElementById('test').style.visibility  = "hidden";
	  document.getElementById('paragraph').style.visibility  = "hidden";
 
 
 
 
  }

Top
Tags: