JavaScript/CSS/DOM issue

E

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">
<title> blah-blah </title>
<style type="text/css">
<!--
..style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
-->
</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.visibility ==
'visible'){
document.getElementById(objChange).style.display = "none";
document.getElementById(objChange).style.visibility = "hidden";
} else {
document.getElementById(objChange).style.display = "block";
document.getElementById(objChange).style.visibility =
"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>&nbsp;Awaiting Approval</td>

<td>&nbsp;Pending</td>
<td>&nbsp;Pending</td>
<td>&nbsp;<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>&nbsp;Under Review</td>

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

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

Any help would be greatly appreciated.

Thanks,
Earl
 
M

Martin Honnen

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.
Click to expand...

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 = '';
 
P

petermichaux

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.
Click to expand...

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">
<title> blah-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>
 
S

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
 
P

petermichaux

surf_doggie said:
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
Click to expand...

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

Peter
 
A

ASM

(e-mail address removed) 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
Click to expand...

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>
Click to expand...
[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>
Click to expand...

<td colspan="5" bgcolor="#993399"><p>some tesa safd asfd [etc...]
</html>
Click to expand...
 
S

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
 
P

petermichaux

surf_doggie said:
Where is the link that works?
Click to expand...

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">
<title> blah-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>
 
A

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.
Click to expand...
Any ideas?
Click to expand...

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

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
 
S

surf_doggie

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

Thanks all
 
A

ASM

surf_doggie a écrit :
ASM:
Click to expand...

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?
Click to expand...

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.
Click to expand...

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";
Click to expand...

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.
Click to expand...

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?
Click to expand...

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

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... ?
Click to expand...

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
 
A

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.
Click to expand...

Some progress in posting :)
Yes I now have to sniff the browser
Click to expand...

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;">
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript DOM 1
HTML Table Issue 1
Angularjs newbie - second JSON datasource does not display 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
SendGrid email issue in responsive Gmail 1
Function call from button to automatic 7
How to have two html audio players on one page? 0
Only one table shows up with the information 2

Members online

Total: 23 (members: 2, guests: 21)
Robots: 77

Forum statistics

Threads
473,770
Messages
2,569,585
Members
45,080
Latest member
mikkipirss

Latest Threads

Top