Forum:

HTML Pages with CSS and JavaScript

style property value detection

Greenhorn

Posts: 6

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm trying to hide/show the rows of the table when user clicks on the image in a particular row. Here is the code:

var rows= tbl.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++) {
if (rows[i].id.indexOf(rootId + "-") > -1) {

if (rows[i].style.display == "none") {
rows[i].style.display= "block"; // works in IE but not in FF
//rows[i].style.display= "table-row"; //works in FF but not in IE
} else {
rows[i].style.display= "none";
}

}
}

What I found is that the "display=block" value works in IE but not in FF or M; "display=table-row" works in FF and M, but not in IE.

So I was wondering if there is a way to detect if a particular style property value is allowed in the browser, like object detection (for example: if (window.focus) {}). I don't want to use browser detection. Is there any other way of doing it?

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

the solution is not pretty, but I have used it a lot

Eric

Paul Clapham

Sheriff

Posts: 28436

104

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Oddly enough I have been working on that same problem this morning. My Javascript skills are minuscule but I found thatmade an invisible row become visible in both IE and Firefox.

Java 8 (verified skill)
Skill verified by Paul Clapham

Tatyana Chinya

Greenhorn

Posts: 6

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks guys. Both of the solutions work. Paul, do you have any idea how the browsers interpret

I know that it works, but it would be nice to know why.

Paul Clapham

Sheriff

Posts: 28436

104

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The web page I got that from (don't remember where) said that the result of assigning an empty string to the style's display attribute was to "set it to the default value". I interpreted that to mean that CSS would then act as if there were no display attribute on the tr element's style. That in turn would mean it would choose a display attribute from a higher-level style definition, which might well be the one in the built-in HTML styles ("the default").

Dan Drillich

Ranch Hand

Posts: 1183

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Microsoft at http://msdn2.microsoft.com/en-us/library/ms530710.aspx says:

Notice that by simply setting display: none on an element, it disappears and the browser automatically reclaims the space it occupied. This mechanism can be used to create pages that display new information, such as an expandable table of contents, as the user interacts with individual entries. The two supported values for the display property are none and "" (or null).

This example is given -

But in FF, I see it behaving as visibility is switched from "visible" to "hidden" and back. Meaning, it becomes invisible but the space remains.

Regards,
Dan

William Butler Yeats: All life is a preparation for something that probably will never happen. Unless you make it happen.

This tiny ad is guaranteed to be gluten free.

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders