Prev: Halloween website
Next: nike air max 2003 ney style hot sell ....free shipping to worldwide
From: Stefan Weiss on 14 Oct 2009 21:13
On 15/10/09 02:04, GTalbot wrote:
> function toggle(strIdAttribute)
> {
> var objTableRow = document.getElementById(strIdAttribute);
> if (objTableRow.style.visibility == "visible")
> {
> objTableRow.style.visibility = "collapse";
> }
> else
> {
> objTableRow.style.visibility = "visible";
> };
> }

If no visibility has been set before calling the function, this will
require two clicks for the first toggle. You could also reduce the
amount of code and in some cases improve performance by avoiding
repetitive lookups of the same property:

function toggle (id) {
var style = document.getElementById(id).style;
style.visibility = style.visibility != "collapse" ? "collapse" :
"visible";
}

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

....and will error out in IE7 and earlier. Given that, how is
visibility/collapse superior to display/none?

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

Could use a little more browser sniffing...


cheers,
stefan
From: Thomas 'PointedEars' Lahn on 16 Oct 2009 17:01
Donkey Hottie wrote:

> 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.
>> [...]
>
> 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.

As obviously is the empty string. The difference is that the correct
default `display' value is `table' for (X)HTML `table' elements, `table-row'
for (X)HTML `tr' elements, and `table-cell' for (X)HTML `th' and `td'
elements. Standards-compliant renderers like Gecko's consider that, while
others like MSHTML's don't. (So the bug is with IE, not Firefox, again.)
Therefore, if you set display to "block" for a `tr' element, rendering
behavior differs in e.g. Firefox (Gecko-based) and MSIE (MSHTML-based),
which was the cause of your grey hair.

Instead, the empty string resets the CSS property to its initial value in
the stylesheet, and if there is no corresponding stylesheet, to its initial
value per the respective user agent's defaults.


PointedEarsw
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: Hans-Georg Michna on 16 Oct 2009 17:51
On Thu, 15 Oct 2009 03:13:26 +0200, Stefan Weiss wrote:

>...and will error out in IE7 and earlier. Given that, how is
>visibility/collapse superior to display/none?

Think so too. The best answer was the very first one, by rf.

Hans-Georg
From: Garrett Smith on 16 Oct 2009 19:33
GTalbot wrote:
> 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 = "";
>
That would only work with two conditions:

1) The the stylesheet had something to hide the TR, as in:
tr {
display: none;
}

2) The element's inline style hides that with something else, such as:
<tr style="display: block; display: table-row">

Such a solution could cause accessibility problem if the script does
succeed (for whatever reason).

The accessibility problem can be avoided by keeping the tr displayed by
default, then hiding using script it.

css:
tr.hidden {
display: none;
}


js:
aTableRow.className = "not-hidden";

>
> 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.
>

Internet Explorer (all versions) will throw errors when it gets a css
value it does not like (in some cases, setting a style value to the
empty string can result in error. Even in IE8).

A feature test can be used to determine which style property works,
however, putting the style information in the css avoids that altogether.

x.className = "myStyleClass";

..myStyleClass {
display: block;
display: table-row;
}

That avoids the IE's fickle behavior with setting styles to values it
doesn't like.
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/
From: Luuk on 17 Oct 2009 04:37
Garrett Smith schreef:
>
> Internet Explorer (all versions) will throw errors when it gets a css
> value it does not like (in some cases, setting a style value to the
> empty string can result in error. Even in IE8).
>

of course it will throw error, because its defined what it should throw
an error on a non-existant css value...

>
> That avoids the IE's fickle behavior with setting styles to values it
> doesn't like.

there are no style values that IE8 does not 'like'

u should simply only use one of the available one's....

a list is at (i.e.) http://www.w3schools.com/CSS/pr_class_display.asp


--
Luuk
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: Halloween website
Next: nike air max 2003 ney style hot sell ....free shipping to worldwide