471,310 Members | 1,150 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,310 software developers and data experts.

Display problem in Firefox

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.
Jul 23 '05 #1
3 9712
shreddie wrote:
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. <tr id="option1" style="display:block">


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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #2
shreddie wrote:
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';


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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #3
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.

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Tony LaPaso | last post: by
6 posts views Thread by mike | last post: by
5 posts views Thread by LRW | last post: by
2 posts views Thread by dale zhang | last post: by
1 post views Thread by KPS | last post: by
7 posts views Thread by Coder | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.