• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

style property value detection

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
the solution is not pretty, but I have used it a lot



Eric
 
Marshal
Posts: 28257
95
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Tatyana Chinya
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Marshal
Posts: 28257
95
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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").
 
Ranch Hand
Posts: 1183
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
reply
    Bookmark Topic Watch Topic
  • New Topic