Visibility Bug

Nodral · October 11, 2011

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>

<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>

<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 } ?>

teynon · October 14, 2011

After a couple of years of using visibility and a bunch of headaches later, I decided never again to use visibility and just use display.

IE: display = 'block'; or display = 'none';

Sign In

Visibility Bug

Recommended Posts

Nodral

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information