Display problem in Firefox

S

shreddie

Could anyone assist with the following problem?

I'm using JavaScript to hide/show table rows depending on the option
selected in radio buttons. The script works fine in IE but in Firefox
the hidden rows take up page space even though their content is not
visible.

I have extracted the necessary code as shown below:

************************************************************************

<html>
<head>
<title>Firefox_Error</title>
<script>

function setOptionField(selected){

if (selected ==0) {
document.getElementById('option1').style.display='block';
document.getElementById('option2').style.display='none';
document.getElementById('option3').style.display='none';
} else if (selected ==1) {
document.getElementById('option1').style.display='none';
document.getElementById('option2').style.display='block';
document.getElementById('option3').style.display='none';
} else {
document.getElementById('option1').style.display='none';
document.getElementById('option2').style.display='none';
document.getElementById('option3').style.display='block';
}
}

</script>

</head>
<body>
<table border='0'>
<tr><td><input name="rdSelect" type="radio" value="Row 1"
onclick=setOptionField(0) checked></td><td>Display row 1</td></tr>
<tr><td><input name="rdSelect" type="radio" value="Row 2"
onclick=setOptionField(1)></td><td>Display row 2</td></tr>
<tr><td><input name="rdSelect" type="radio" value="Row 3"
onclick=setOptionField(2)></td><td>Display row 3</td></tr>
</table>

<table border = "1">
<tr id="option1" style="display:block"><td><b>Row One
Displayed</b></td></tr>
<tr id="option2" style="display:none"><td><b>Row Two
Displayed</b></td></tr>
<tr id="option3" style="display:none"><td><b>Row Three
Displayed</b></td></tr>
</table>
</body>
</html>

************************************************************************

Thanks in advance.
 
D

David Dorward

shreddie said:
I'm using JavaScript to hide/show table rows depending on the option
selected in radio buttons. The script works fine in IE but in Firefox
the hidden rows take up page space even though their content is not
visible.
Click to expand...
<tr id="option1" style="display:block">
Click to expand...

Bug in IE. Table rows should be display: table-row, not display: block.

Toggle between "none" and "" to cope with browsers which follow the standard
and IE.
 
G

Grant Wagner

shreddie said:
Could anyone assist with the following problem?

I'm using JavaScript to hide/show table rows depending on the option
selected in radio buttons. The script works fine in IE but in Firefox
the hidden rows take up page space even though their content is not
visible.

I have extracted the necessary code as shown below:

************************************************************************

<html>
<head>
<title>Firefox_Error</title>
<script>

function setOptionField(selected){

if (selected ==0) {
document.getElementById('option1').style.display='block';
Click to expand...

The default -display- style of a table row is not "block", it is "table-row".
But IE does not understand "table-row", so the best choice is to set the
display style to an empty string "", which should result in the default
style, which should work in most user agents that support getElementById():

document.getElementById('option1').style.display = '';

Below is more generic code to allow you to do what you are doing for any
number of rows:

<script type="text/javascript">
function setOptionField(selected) {
if (/Row (\d+)/.test(selected) && RegExp.$1 != '') {
var item = RegExp.$1;
document.getElementById('option' + item).style.display = '';
var node;
var ii = 1;
while (node = document.getElementById('option' + ii)) {
if (ii != item) {
node.style.display = 'none';
}
++ii;
}
}
}
</script>

And use

<input name="rdSelect"
type="radio" value="Row 2"
onclick="setOptionField(this.value);">

Please note that my first attempt at it was:

while (node = document.getElementById('option' + ii)) {
if (ii == item) {
node.style.display = '';
} else {
node.style.display = 'none';
}
++ii;
}

which did not work and resulted in the same behavior you saw. You _must_ set
the -display- style on the visible one prior to turning off the ones that are
not visible.
 
S

shreddie

David / Grant

Thankyou both very much. Problem rectified. This was my first post to
Google groups and I'm quite taken aback by yours/others promptness and
willing to help!!

Thanks again, cheers Shreddie.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
Javascript DOM 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Grouping messages that have similarities 2
Filter table rows based on multiple checkboxes value 2
Angularjs newbie - second JSON datasource does not display 0
I want to Display Excel As HTML In js 2

Members online

Total: 19 (members: 1, guests: 18)
Robots: 443

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top