JavaScript/CSS/DOM issue

earl.robb

Please excuse me If I am posting to the wrong group. I was recommended
here from one of the Database groups I regularly track.

I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.

Now this works dandy in IE but in FireFox the element "opens" but when
you click on it again to "hide" the text in the cell disappears but the
actual element itself does not "dissappear" leaving a big blank space.

Working sample is here http://www.jhdesigninc.com/testJava.asp Its not
"pretty" because I eliminated all the code I possible could to make the
problem easier to understand.

Code Sample-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta Http-Equiv="Content-Type" Content="text/html;
charset=iso-8859-1">
<titleblah-blah </title>
<style type="text/css">

</style>
<script type="text/JavaScript">
function changeView(objChange){
/*have tried sniffing browser and not using getElement
didnt seem to help with display or visibilty
Im missing something really basic
*/
if (document.getElementById(objChange).style.visibili ty ==
'visible'){
document.getElementById(objChange).style.display = "none";
document.getElementById(objChange).style.visibilit y = "hidden";
} else {
document.getElementById(objChange).style.display = "block";
document.getElementById(objChange).style.visibilit y =
"visible";
}

}
</SCRIPT>
</head>
<body>

<table width="449" border="0" cellspacing="1" cellpadding="1">
<tr valign="top">
<td width="100%" align="left" nowrap<span class="style1">Click on
the LINK Its works in IE and Netscape but not Fox. <br>

The window does not go to display:none and visibility:hidden<br>
In Firefox compare IE and Firefox by clicking on the view<br>
button multiple times in both browsers
</span><br>
<br>
<BR>

<table width="100%" border="0" cellspacing="2" cellpadding="0"
id="clickTbl">
<tr class="tblHeader">
<td class="tblHeader">Approver</td>
<td class="tblHeader">Status</td>

<td class="tblHeader">Date</td>
<td class="tblHeader">Time</td>
<td class="tblHeader">Notes</td>
</tr>
<tr>
<td>Bill Gordon</td>
<td> Awaiting Approval</td>

<td> Pending</td>
<td> Pending</td>
<td> <a href="#" onClick="changeView('notes');">View
</a></td>
</tr>
<tr id="notes" style="visibility:hidden; display:none;">
<td colspan="5" bgcolor="#993399"><p>some tesa safd asfd
asddfdasdf
fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asd
f asdf
asdf asd asdfasda</p>
<p>asdasdfasdf</p>

<p>asdf</p>
<p>a</p>
<p>sdf </p></td>
</tr>
<tr>
<td>Brenda Hudson</td>
<td> Under Review</td>

<td> Pending</td>
<td> Pending</td>
<td> Cell Below Not Relevant</td>
</tr>
</table></td>
</tr>
</table>
</body>

</html>
End Code-------------------------------

Any help would be greatly appreciated.

Thanks,
Earl

Sep 9 '06 #1

Subscribe Reply

1713

Martin Honnen

ea*******@gmail.com wrote:

I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.

Now this works dandy in IE but in FireFox the element "opens" but when
you click on it again to "hide" the text in the cell disappears but the
actual element itself does not "dissappear" leaving a big blank space.

First of all if you toggle the CSS display property to show/hide
elements then there is no need at all to toggle the CSS visibility
property as well. You can leave visibility alone and simply toggle display.
Then the remaining problem is that CSS 2 defines various possible
display values, for table row elements like the HTML tr elements
'table-row' is the right value and not 'block'. Only IE till version 6
does not support that.
As long as you are using inline styles the solution however is simple:
to hide set e.g.
elementObject.style.display = 'none';
to show it suffices to do
elementObject.style.display = '';
--

Martin Honnen
http://JavaScript.FAQTs.com/

Sep 9 '06 #2

petermichaux

ea*******@gmail.com wrote:

I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.

Hi Earl,

I played with your example and think i found the problem. You are using
display="block" for a table row when it should be display="table-row".

You don't need to toggle both "display" and "visibility. Just toggling
"display" should be fine. If you want to toggle "visibility" you can do
that too but it shouldn't make a difference.

Nested tables are scary and probably not necessary.

The "return false;" I added makes it so the URL doesn't have a '#'
after clicking the link

Adjusted example below.

-Peter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta Http-Equiv="Content-Type" Content="text/html;
charset=iso-8859-1">
<titleblah-blah </title>

<script type="text/javascript">

function changeView(objChange){
var el = document.getElementById(objChange)
if (el){
if (el.style.display.toLowerCase() !== 'none'){
el.style.display = "none";
} else {
el.style.display = "table-row";
// this works too as long as the display style is not set in
a css file etc
//el.style.display = "";
}
}
}
</script>
</head>
<body>

<p>
Click on the LINK Its works in IE and Netscape but not Fox.
The window does not go to display:none and visibility:hidden
In Firefox compare IE and Firefox by clicking on the view
button multiple times in both browsers
</p>

<table width="100%" border="0" cellspacing="2" cellpadding="0"
id="clickTbl">
<tr>
<td>Bill Gordon</td>
<td>Awaiting Approval</td>
<td>Pending</td>
<td>Pending</td>
<td><a href="#" onClick="changeView('notes');return
false;">View</a></td>
</tr>
<tr id="notes" style="display:none">
<td colspan="5" bgcolor="#993399">
<p>some tesa safd asfd asddfdasdf
fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asdf asdf
asdf asd asdfasda</p>
<p>asdasdfasdf</p>
<p>asdf</p>
<p>a</p>
<p>sdf </p>
</td>
</tr>
<tr>
<td>Brenda Hudson</td>
<td>Under Review</td>
<td>Pending</td>
<td>Pending</td>
<td>Cell Below Not Relevant</td>
</tr>
</table>

</body>
</html>

Sep 9 '06 #3

surf_doggie

Thank you peter & martin for your input. If I am missing something you
are telling me bang me over the head with it.

I have tried elementObject.style.display = 'none'; and it did not
rectify the issue
elementObject.style.display = ''; as far as I know that call is
invalid.

If you have it working with Firefox can you just send me a link so I
can see what needs to be done.

Im sorry Table-row has nothing to do with the issue. The issue is the
html element will not collapse again. I know how to adjust the display
I dont know how to Collapse the element again.

Earl

Sep 9 '06 #4

petermichaux

surf_doggie wrote:

Thank you peter & martin for your input. If I am missing something you
are telling me bang me over the head with it.

I have tried elementObject.style.display = 'none'; and it did not
rectify the issue
elementObject.style.display = ''; as far as I know that call is
invalid.

If you have it working with Firefox can you just send me a link so I
can see what needs to be done.

Im sorry Table-row has nothing to do with the issue. The issue is the
html element will not collapse again. I know how to adjust the display
I dont know how to Collapse the element again.

Earl

Did you try the example I posted in Firefox? It works for me.

Peter

Sep 9 '06 #5

ASM

ea*******@gmail.com a écrit :

I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.

Now this works dandy in IE but in FireFox the element "opens" but when
you click on it again to "hide" the text in the cell disappears but the
actual element itself does not "dissappear" leaving a big blank space.

Working sample is here http://www.jhdesigninc.com/testJava.asp

It is tipicaly a misundertanding about css rules in IE.
IE needs 'block' and FireFox (and others) wants 'table-row' for rule
'display' about rows in table.

As you want to hide a TR, the best way is to undisplay it
Then to show it again you just need to give it back it's natural appearance.

Of course, your TR 'notes' has no rule to hide him in "normal" view.
It's *JS who has to* do the job ( onload = function ...)

Code Sample-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

[snip]

<script type="text/JavaScript">
function changeView(objChange){
var objToChge = document.getElementById(objChange).style;
objToChge.display = objToChge.display==''? 'none' : '';
}
onload = function() { changeView('notes'); };
</script>

[re-snip]

</tr>

<td colspan="5" bgcolor="#993399"><p>some tesa safd asfd

[etc...]

</html>

--
Stephane Moriaux et son [moins] vieux Mac

Sep 9 '06 #6

surf_doggie

Yes Peter I have tried table-row. I will try it again and see if it
closes the table.

document.getElementById(objChange).style.display = "table-row"; does
not work in Fox which is where I am looking for the solution. In
addition it breaks IE.

I know table-row for the display I can sniff.

My quandry is how do I get the element to disappear in Fox. If you
click on it multiple times it keeps adding space and wholes. It never
collapes's

Any ideas?

Earl

Sep 9 '06 #7

surf_doggie

Where is the link that works?

Sep 9 '06 #8

petermichaux

surf_doggie wrote:

Where is the link that works?

It wasn't a link. Here it is again. But if what ASM posted is true then
you should use the el.style.display = "" option instead of
el.style.display = "table-row" in the following example so it works in
firefox and ie.

Peter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta Http-Equiv="Content-Type" Content="text/html;
charset=iso-8859-1">
<titleblah-blah </title>

<script type="text/javascript">

function changeView(objChange){
var el = document.getElementById(objChange)
if (el){
if (el.style.display.toLowerCase() !== 'none'){
el.style.display = "none";
} else {
el.style.display = "table-row";
// this works too as long as the display style is not set in
a css file etc
//el.style.display = "";
}
}
}

</script>
</head>
<body>

<p>
Click on the LINK Its works in IE and Netscape but not Fox.
The window does not go to display:none and visibility:hidden
In Firefox compare IE and Firefox by clicking on the view
button multiple times in both browsers
</p>

<table width="100%" border="0" cellspacing="2" cellpadding="0"
id="clickTbl">
<tr>
<td>Bill Gordon</td>
<td>Awaiting Approval</td>
<td>Pending</td>
<td>Pending</td>
<td><a href="#" onClick="changeView('notes');return
false;">View</a></td>
</tr>
<tr id="notes" style="display:none">
<td colspan="5" bgcolor="#993399">
<p>some tesa safd asfd asddfdasdf
fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asdf asdf
asdf asd asdfasda</p>
<p>asdasdfasdf</p>
<p>asdf</p>
<p>a</p>
<p>sdf </p>
</td>
</tr>
<tr>
<td>Brenda Hudson</td>
<td>Under Review</td>
<td>Pending</td>
<td>Pending</td>
<td>Cell Below Not Relevant</td>
</tr>
</table>

</body>
</html>

Sep 9 '06 #9

ASM

surf_doggie a écrit :

Yes Peter I have tried table-row. I will try it again and see if it
closes the table.

document.getElementById(objChange).style.display = "table-row"; does
not work in Fox which is where I am looking for the solution. In
addition it breaks IE.

Any ideas?

You absolutely not have to use neither 'table-row' nor 'block'.
You have to use the inverse method

1) hide : display = 'none';
2) show : display = '';

Any of your elements to hide are styled in {display:none}
JavaScript will hide what you want on loading page
Then your link or button will alternatively show / hide what was hidden

There is no other "clean" way to do.

<html>
<script type="text/javascript">
function switcher(boxId) {
var box = document.getElementById(boxId).style;
box.display = box.display==''? 'none' : '';
}
onload = function() { switcher('row');}
</script>
<a href="#" onclick="switcher('row');return false">swith row</a>
<table border=2 cellspacing=5>
<tr id="row" bgcolor="#ffffcc">
<td height=120>to see</td><td>what appends</td>
</tr><tr>
<td>something</td><td>here</td>
</tr>
</table>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

Sep 10 '06 #10

surf_doggie

ASM:
I have to ask because I am trying to solve the issue of the block not
closing. I have heard alot about table-row. Sorry Im dense but that
will collapse the table row?

I appreciate all the help Im but I cant get the table row to collapse.

It would seem to me that it wouldnt matter if I called table-row or
block when I call .style.display = "none"; and .style.visibility =
"hidden";

In FoxFire that it would collapse the same way it does in IE.
All I am looking for is to be able to collapse the table in Fox the
same way it does in IE. Im sorry Im not getting it and you guys have it
figured out can someone tell me where I am failing?

Earl

Sep 10 '06 #11

surf_doggie

You all have been great testing peters solution will let you know in
the am.

Thanks all

Sep 10 '06 #12

ASM

surf_doggie a écrit :

ASM:

Dear Earl Doggle Surf,

It would be better you keep in your posts some text from post you're
answering.

It is very difficult to follow what about you're speaking.

Can't you use preferences of your Mozilla Messenger ?
(somewhere it's question of news and/or forums)

I have to ask because I am trying to solve the issue of the block not
closing. I have heard alot about table-row. Sorry Im dense but that
will collapse the table row?

To hide a block or any element : visibility: hidden;
To disappear a block or an elemt : display: none;

Both actions are not same,
- 1st : un-show the element but keep place for it
- 2nd : un-display the element -no place kept

You have to decide *which one* of these two methods you want, and then
to adopt the right method for its contrario.

Revealing a hidden is quit easy : visibility: visible;

But to reveal a non displayed element is more difficult,
you need to know at what kind of element you tell :
is it of type : image, block, in-line, table, table-row etc... ?

IE, with it's approximations and it's unknowing correct css, cause
problem so we avoid to have to precise this element properties.

display off : myElement.style.display = 'none';
display back : myElement.style.display = '';

absolutely used in this order.

And switchering is obtained with :

myElement.style.display = myElement.style.display == ''?
'none' : '' ;

or in long code :

if(myElement.style.display == '') myElement.style.display = 'none';
else
myElement.style.display = '';

This method is available for all styles, of course.

I appreciate all the help Im but I cant get the table row to collapse.

Did you try the example code given in my percedent posts ?
(copy that code and paste it in your notePad and save it in html
extension, then try it in your browsers)
The last one is a very basic example I think not too much difficult to
understand.

It would seem to me that it wouldnt matter if I called table-row or
block when I call .style.display = "none"; and .style.visibility =
"hidden";

See above (it's one or other : display OR visible)

If you set style to 'none' it is none, nothing, nada, rien ...
(whatever the element is)

To style back your element
you just need to tell there is no more style added -'';
Translation : style is empty (different of nada, nothing)

In FoxFire that it would collapse the same way it does in IE.

use correct method given.

All I am looking for is to be able to collapse the table in Fox the
same way it does in IE. Im sorry Im not getting it and you guys have it
figured out can someone tell me where I am failing?

You're failling in :
- css using (and their significations)
- no easy possibility to correctly address to a table row

The way is to use the default mechanisms of browsers :
they know what are the proprieties of element called
even if they do not name them same way.
--
Stephane Moriaux et son [moins] vieux Mac

Sep 10 '06 #13

surf_doggie

Thanks ASM I appreciate all the help the room has givin me lots of good
people here. As I suspected the issue was really silly.

is it of type : image, block, in-line, table, table-row etc... ?

Yes I now have to sniff the browser and use table-row for a correct
display but the issue of the table-row collapsing in FireFox was really
a silly mistake. To correct the issue in Firefox I changed

<tr id="notes" style="visibility:hidden; display:none;">
<td colspan="5" bgcolor="#993399"--------
TO

<tr>
<td colspan="5" bgcolor="#993399" id="notes" style="visibility:hidden;
display:none;">-----

Time to start cleaning up code and making it tighter thank you all for
your help with this.

In the future I will remember to quote ASM good point about
understanding whats going especially if your getting email
notifications

Earl

ASM wrote:

surf_doggie a écrit :
ASM:

Dear Earl Doggle Surf,

It would be better you keep in your posts some text from post you're
answering.

It is very difficult to follow what about you're speaking.

Can't you use preferences of your Mozilla Messenger ?
(somewhere it's question of news and/or forums)

I have to ask because I am trying to solve the issue of the block not
closing. I have heard alot about table-row. Sorry Im dense but that
will collapse the table row?

To hide a block or any element : visibility: hidden;
To disappear a block or an elemt : display: none;

Both actions are not same,
- 1st : un-show the element but keep place for it
- 2nd : un-display the element -no place kept

You have to decide *which one* of these two methods you want, and then
to adopt the right method for its contrario.

Revealing a hidden is quit easy : visibility: visible;

But to reveal a non displayed element is more difficult,
you need to know at what kind of element you tell :
is it of type : image, block, in-line, table, table-row etc... ?

IE, with it's approximations and it's unknowing correct css, cause
problem so we avoid to have to precise this element properties.

display off : myElement.style.display = 'none';
display back : myElement.style.display = '';

absolutely used in this order.

And switchering is obtained with :

myElement.style.display = myElement.style.display == ''?
'none' : '' ;

or in long code :

if(myElement.style.display == '') myElement.style.display = 'none';
else
myElement.style.display = '';

This method is available for all styles, of course.

I appreciate all the help Im but I cant get the table row to collapse.

Did you try the example code given in my percedent posts ?
(copy that code and paste it in your notePad and save it in html
extension, then try it in your browsers)
The last one is a very basic example I think not too much difficult to
understand.

It would seem to me that it wouldnt matter if I called table-row or
block when I call .style.display = "none"; and .style.visibility =
"hidden";

See above (it's one or other : display OR visible)

If you set style to 'none' it is none, nothing, nada, rien ...
(whatever the element is)

To style back your element
you just need to tell there is no more style added -'';
Translation : style is empty (different of nada, nothing)

In FoxFire that it would collapse the same way it does in IE.

use correct method given.

All I am looking for is to be able to collapse the table in Fox the
same way it does in IE. Im sorry Im not getting it and you guys have it
figured out can someone tell me where I am failing?

You're failling in :
- css using (and their significations)
- no easy possibility to correctly address to a table row

The way is to use the default mechanisms of browsers :
they know what are the proprieties of element called
even if they do not name them same way.
--
Stephane Moriaux et son [moins] vieux Mac

Sep 10 '06 #14

ASM

surf_doggie a écrit :

Thanks ASM I appreciate all the help the room has givin me lots of good
people here. As I suspected the issue was really silly.

>is it of type : image, block, in-line, table, table-row etc... ?

Some progress in posting :-)

Yes I now have to sniff the browser

absolutely not

You turn the problen in wrong way and never you'l really get absolute
satisfaction.

I changed TO

<tr>
<td colspan="5" bgcolor="#993399" id="notes" style="visibility:hidden;
display:none;">

And it is a very bad way to do !
How visitor with JS disabled will can see this element ?

Don't tell me he turns on his JS.
As he see nothing it can't know there would be something to see.

Last time I tell it : the element must be hide by javascript.

With bonus : show is very easy.

--
Stephane Moriaux et son [moins] vieux Mac

Sep 10 '06 #15

JavaScript/CSS/DOM issue

Similar topics