473,382 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 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 10222
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Tony LaPaso | last post by:
Hi All, I have a simple style sheet example below and I'm seeing different results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is rendering it correctly but I'm tending to think it's...
6
by: mike | last post by:
I have a page that uses a some javascript and it works fine in IE but fails to work in Firefox. Basically what I'm trying to do is have 3 iframes on a page but only displaying one of them at a...
5
by: LRW | last post by:
(Sorry if this is a repost...my newsreader keeps crashing on the posting--I don't know if the message going out or not) For some reason this javascript just won't work in Firefox. It works fine...
2
by: dale zhang | last post by:
Hi, I am using asp.net to make a web application. IE 6 has the best display. Firefox reports server error – can not display at all. Netscape displays all 3 columns in one column (one by one)....
1
by: KPS | last post by:
I'm attempting to create a simple treeview-like behavior in JavaScript. The desired behavior happens in IE but I cannot get the same to happen in FireFox. The primary thing I want to accomplish...
7
by: Coder | last post by:
Hi I have the following code in java script, it is not giving proper output in FIREFOX but running fine in IE... can anybody help me out to make this run in FIREFOX . <script...
1
by: RonY | last post by:
I have a dropdown which calls SetTimePeriod method on change the selection. In the JS function, I reset the field style.display based on what the selection is. This works fine with IE but not working...
7
by: Xah Lee | last post by:
Look at this page http://xahlee.org/emacs/wrap-url.html Look at it in Firebox, look at it in Safari, in Opera, and look at it in Microsoft Internet Explorer. The only fucked up case, is...
4
by: Mark | last post by:
I have developed a generic list-based css menu. It works both in IE7 and Firefox, and with the help of Peter Nederlof's csshover.htc, with older IE versions. I have included a simplified version...
1
by: SunshineInTheRain | last post by:
The following code is dynamic create dropdownmenu which data within pulled from database However, the code work well on IE but not on Firefox. On Firefox, the whole mouseover and mouseout function...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.