Forum Moderators: open
I am trying to do a small questionnaire with check boxes opening and closing questions according to what the user checks.
I have no problems with the opening closing stuff I have almost finished the job but am stumped on this.
I have a tr tag in a table of questions and when a user check a boxs the table row appears and disapears by using a javascript function that changes the display property of the row.
In explorer I use display: block and it works fine.
In Mozilla it does not like it, and draws the cells out of sync. Unless you use display: table-row.
This works fine with mozilla but IE will not accept table-row as a display property in this instance.
Is there a happy medium that I have missed?
A simple browser detection line in the javascript.
It was obvious really.
if (navigator.appName == "Microsoft Internet Explorer") {
var displayType = 'block';
} else {
var displayType = 'table-row';
}
document.getElementById(blockID).style.display = displayType;
If anyone knows why not to do it that way (it is probably equally obvious) I would love to hear.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td{border:4px solid;}
</style>
</head>
<body>
<table>
<tr onclick="alert(this.currentStyle? this.currentStyle.display : getComputedStyle(this,null).getPropertyValue('display'));">
<td> </td>
</tr>
</table>
</body>
</html>
Note: The ternary needs to be on one line; it is the forum that breaks it across two lines.
// Show/hide DIV
// Tested on IE, Opera, Netscape/Mozilla
function toggleDiv(DivName)
{ with (document.getElementById(DivName).style) {
if (display == "none")
display = ""
else display = "none";
}}
Despite the name, it should work any element, not just divs. You should note that the trick is to set style.display="" to display it.
Kaled.
Thanks anyway I have made a mental note of the possibility for future reference.
Kaled
The trick in my case was indeed to use display='' instead of display='block' or display='table-row'
What stumped me was I had used a css class to make the table row vanish when the page was drawn initially and so it did not work straight away. When I altered the tr tag to have style="display: none" instead of class="rowHide" it worked a treat.
Thanks again :)
