Prev: Halloween website
Next: nike air max 2003 ney style hot sell ....free shipping to worldwide
From: Patrick Nolan on 14 Oct 2009 19:11
There is an HTML table with two columns. I would like to hide
or reveal a row by clicking a box. I worked out a way to do it
which works for IE, but the result surprises me in Firefox.

The HTML for the row looks like this:
<tr id=foobar><td>data</td><td>Some text</td></tr>

The button which controls it looks like this:
<input type=button value="Flip the row" onClick="toggle('foobar');">

The function that does the work is
function toggle(element) {
var el = document.getElementById(element);
if (el.style.display == "none") el.style.display = "block";
else el.style.display = "none";
}

On IE, the row just appears and disappears neatly when I
click the button. On Firefox, the two <td> contents are
mashed together in the first column.

Here it is graphically:

With the column hidden:
stuff stuff
stuff stuff

With the column visible:
stuff stuff
dataSome text
stuff stuff

The expected result:
stuff stuff
data Some text
stuff stuff
From: rf on 14 Oct 2009 19:19

"Patrick Nolan" <pln(a)glast2.Stanford.EDU> wrote in message
news:slrnhdcmke.g0h.pln(a)www-glast.stanford.edu...
> There is an HTML table with two columns. I would like to hide
> or reveal a row by clicking a box. I worked out a way to do it
> which works for IE, but the result surprises me in Firefox.
>
> The HTML for the row looks like this:
> <tr id=foobar><td>data</td><td>Some text</td></tr>
>
> The button which controls it looks like this:
> <input type=button value="Flip the row" onClick="toggle('foobar');">
>
> The function that does the work is
> function toggle(element) {
> var el = document.getElementById(element);
> if (el.style.display == "none") el.style.display = "block";
> else el.style.display = "none";
> }

This is not a Javscript problem, it's a CSS one.

Table rows are not display: block, they are display: table-row. IE is either
error correcting what you are doing or is dense enough to be able to display
the row as you want it.

If you want to turn off display: none then
el.style.display = "";


From: Donkey Hottie on 14 Oct 2009 19:25
15.10.2009 2:11, Patrick Nolan kirjoitti:
> There is an HTML table with two columns. I would like to hide
> or reveal a row by clicking a box. I worked out a way to do it
> which works for IE, but the result surprises me in Firefox.
>
> The HTML for the row looks like this:
> <tr id=foobar><td>data</td><td>Some text</td></tr>
>
> The button which controls it looks like this:
> <input type=button value="Flip the row" onClick="toggle('foobar');">
>
> The function that does the work is
> function toggle(element) {
> var el = document.getElementById(element);
> if (el.style.display == "none") el.style.display = "block";
> else el.style.display = "none";
> }
>
> On IE, the row just appears and disappears neatly when I
> click the button. On Firefox, the two<td> contents are
> mashed together in the first column.
>
> Here it is graphically:
>
> With the column hidden:
> stuff stuff
> stuff stuff
>
> With the column visible:
> stuff stuff
> dataSome text
> stuff stuff
>
> The expected result:
> stuff stuff
> data Some text
> stuff stuff

You can also set the display="" if you definitely don't want "block".
Block has caused grey hair to me earlier. I do not know what difference
does "block" do, but it is different from undefined.


From: GTalbot on 14 Oct 2009 20:04
On 14 oct, 19:11, Patrick Nolan <p...(a)glast2.Stanford.EDU> wrote:
> I would like to hide
> or reveal a row by clicking a box.  I worked out a way to do it
> which works for IE, but the result surprises me in Firefox.
>
> The HTML for the row looks like this:
> <tr id=foobar><td>data</td><td>Some text</td></tr>

foobar should be quoted: it's preferable.

> The button which controls it looks like this:
> <input type=button value="Flip the row" onClick="toggle('foobar');">

It is always preferable to quote all attribute values. This helps not
only debugging, avoiding errors but parsing by debuggers and browsers.

>
> The function that does the work is
> function toggle(element)

You are not passing an element or a pointer but just the id attribute
value as a string here. Your naming code is a bit misleading.

{
>   var el = document.getElementById(element);
>   if (el.style.display == "none") el.style.display = "block";
>   else el.style.display = "none";
>
> }


function toggle(strIdAttribute)
{
var objTableRow = document.getElementById(strIdAttribute);
if (objTableRow.style.visibility == "visible")
{
objTableRow.style.visibility = "collapse";
}
else
{
objTableRow.style.visibility = "visible";
};
}

will work as expected in IE 8, Firefox 2.x, Firefox 3.x and Seamonkey
1+

Interactive demo page on table column and table row collapse and
visibility in DOM 2 compliant browsers
http://www.gtalbot.org/DHTMLSection/TableRowColumnCollapse.html

regards, Gérard
--
Internet Explorer 7 bugs: 183 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 57 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
From: GTalbot on 14 Oct 2009 20:20
On 14 oct, 19:19, "rf" <r...(a)z.invalid> wrote:

> Table rows are not display: block, they are display: table-row. IE is either
> error correcting what you are doing or is dense enough to be able to display
> the row as you want it.
>
> If you want to turn off display: none then
> el.style.display = "";


IE 7 considers table-row objects as block, not as table-row
IE 8, Opera 9+, Firefox 1+, Safari 3+ treat table-row objects as table-
row.
For IE 8, Firefox 2+ (and other Gecko-based browsers), it is ok to use
visibility, instead of display to toggle a table-row.

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

http://www.gtalbot.org/DHTMLSection/TableRowColumnCollapse.html

regards, Gérard
--
Internet Explorer 7 bugs: 183 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 57 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
 |  Next  |  Last
Pages: 1 2 3
Prev: Halloween website
Next: nike air max 2003 ney style hot sell ....free shipping to worldwide