473,320 Members | 2,147 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,320 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 10216
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...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
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: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.