Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > hide and show text

Reply
Thread Tools

hide and show text

 
 
Michael Skind
Guest
Posts: n/a
 
      12-14-2003
Hello,

I use a simple Table :
<TABLE>
<TR 1>
<TD></TD>
</TR>
<TR 2>
<TD></TD>
</TR>
<TR 3>
<TD></TD>
</TR>
</TABLE>
and I would like to hide the second TR when the page load in order to show
it on an image click.

I would like to avoid document.write() method.
I have tried hiden/visibility style but I get spaces where TR 2 is suppose
to be between TR 1 and TR 3.

Is there a simple way to do this ?

Thanks a lot,

M.


 
Reply With Quote
 
 
 
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      12-14-2003
"Michael Skind" <(E-Mail Removed)> writes:

> I have tried hiden/visibility style but I get spaces where TR 2 is suppose
> to be between TR 1 and TR 3.


Try setting style.display="none" to hide and style.display="" to show
it again.

/L
--
Lasse Reichstein Nielsen - http://www.velocityreviews.com/forums/(E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      12-14-2003
Michael Skind wrote on 14 dec 2003 in comp.lang.javascript:

> I use a simple Table :
> <TABLE>
> <TR 1>
> <TD></TD>
> </TR>
> <TR 2>
> <TD></TD>
> </TR>
> <TR 3>
> <TD></TD>
> </TR>
> </TABLE>
> and I would like to hide the second TR when the page load in order to
> show it on an image click.
>
> I would like to avoid document.write() method.


You cannot NOt avoud that,
because it woud destroy your page AND the code.


> I have tried hiden/visibility style but I get spaces where TR 2 is
> suppose to be between TR 1 and TR 3.
>


<script>
function hide(x){
document.getElementById(x).style.display='none'
}
function show(x){
document.getElementById(x).style.display=''
}
</script>


<button
onclick="hide('tr2')">
hide row 2
</button>&nbsp;

<button
onclick="show('tr2')">
show row 2
</button><br>

<table border=1>
<tr id=tr1><td>ttttt</td><td>1111111</td></tr>
<tr id=tr2><td>ttttt</td><td>222</td></tr>
<tr id=tr3><td>ttttt</td><td>3</td></tr>
</table>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-15-2003
Evertjan. wrote:

> Michael Skind wrote on 14 dec 2003 in comp.lang.javascript:
>> I would like to avoid document.write() method.

>
> You cannot NOt avoud that,
> because it woud destroy your page AND the code.


Your logic is, after all, quite interesting

>> I have tried hiden/visibility style but I get spaces where TR 2 is
>> suppose to be between TR 1 and TR 3.
>>

>
> <script>


<script type="text/javascript">

> function hide(x){
> document.getElementById(x).style.display='none'
> }
> function show(x){
> document.getElementById(x).style.display=''
> }


This is syntactically and semantically correct but error-catching
and inefficient. See <(E-Mail Removed)> for details.

> </script>
> [...]



PointedEars
 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      12-15-2003
Thomas 'PointedEars' Lahn <(E-Mail Removed)> writes:

> Evertjan. wrote:


>> function hide(x){
>> document.getElementById(x).style.display='none'
>> }
>> function show(x){
>> document.getElementById(x).style.display=''
>> }

>
> This is syntactically and semantically correct but error-catching
> and inefficient. See <(E-Mail Removed)> for details.


To me "error catching" is *good* (you *want* to catch your errors,
otherwise you can't fix them).

I checked the message you refer to for details, Your point is that
the author didn't check for the existence of getElementById?

The W3C DOM is the one thing I can accept not checking for. Obviously,
if you need to support older browsers (Netscape 4, IE 4), you will
need to use proprietary code, but a footnote to that effect should be
sufficient.

Anyway, the existence of document.getElementById and the style object
on the node are not sufficient to conclude that the code works. It fails
in, e.g., Opera 6, because it doesn't allow dynamic changing of the
display property.

/L
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-15-2003
Lasse Reichstein Nielsen wrote:
> Thomas 'PointedEars' Lahn <(E-Mail Removed)> writes:
>> Evertjan. wrote:
>>> function hide(x){
>>> document.getElementById(x).style.display='none'
>>> }
>>> function show(x){
>>> document.getElementById(x).style.display=''
>>> }

>>
>> This is syntactically and semantically correct but error-catching
>> and inefficient. See <(E-Mail Removed)> for details.

>
> To me "error catching" is *good* (you *want* to catch your errors,
> otherwise you can't fix them).


Of course it was not meant this way.

> I checked the message you refer to for details, Your point is that
> the author didn't check for the existence of getElementById?


That is what `error-catching' refers to. What would be the
appropriate expression for provoking script errors with such?

> The W3C DOM is the one thing I can accept not checking for. Obviously,
> if you need to support older browsers (Netscape 4, IE 4), you will
> need to use proprietary code, but a footnote to that effect should be
> sufficient.


You could not be more wrong. W3C-DOM is supported in Windows-IE not
really (meaning it is not usable) below version 5.5 and support in
other UAs is still limited. However, it should be rule of thumb for
a Web author and J(ava)Script programmer not to exclude any people
who want to use a site, no matter how standards-compliant their UA is.
They may not have a choice.

> Anyway, the existence of document.getElementById and the style object
> on the node are not sufficient to conclude that the code works. It fails
> in, e.g., Opera 6, because it doesn't allow dynamic changing of the
> display property.


It looks like you oppose yourself, as the `display' property is part of
the W3C-DOM Level 2 Style Specification and not specified as read-only.

But thanks for pointing this out, this will save me a lot of trouble.
Can one even accomplish what the OP wants in Opera 6 and if yes, how?


PointedEars
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      12-15-2003
"Thomas 'PointedEars' Lahn" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
<snip>
>It looks like you oppose yourself, as the `display' property
>is part of the W3C-DOM Level 2 Style Specification and not
>specified as read-only.


There is an apparent coincidence (but no specified or certain
relationship) that on browsers that will allow the setting of a
style.display property with JavaScript to modify the presentation of a
page the display property is typeof == 'string' while the browsers that
cannot do this either have no style object (e.g. Netscape 4) or the
display property of the style object is undefined, So:-

if((elm.style)&&(typeof elm.style.display == 'string')){
// *probably* OK to assume that setting this
// property will be reflected on the page.
}

IE 4 is an example of a browser with zero W3C DOM support that will
happily switch the display property of elements dynamically and reflect
the result in its display.

>But thanks for pointing this out, this will save me a lot
>of trouble. Can one even accomplish what the OP wants in
>Opera 6 and if yes, how?


The dynamic aspects of Operas 5 & 6 are limited to CSS positioned
elements, which may be sized, moved and z-index stacked, but the results
suffer from numerous display bugs and are dubious at best. Given the
OP's table mark-up, Opera <= 6 will not be able to perform this task at
all. It is possible to set the style.position property of elements
dynamically so an element can be rendered position:absolute; but that
isn't going to work well (if at all) with a TR element and Opera never
re-flows the remaining content even if you do that. Otherwise,
visibility = 'hidden' would conceal the content, but not really
satisfactorily.

Richard.


 
Reply With Quote
 
Eric Bohlman
Guest
Posts: n/a
 
      12-15-2003
Thomas 'PointedEars' Lahn <(E-Mail Removed)> wrote in
news:(E-Mail Removed):

> That is what `error-catching' refers to. What would be the
> appropriate expression for provoking script errors with such?


"Error-prone" is the usual English idiom for "unreasonably susceptible to
errors."

I think the upshot of all this discussion is that if you're going to try to
dynamically manipulate the visibility and/or presence of elements, you need
to make them visible and displayed by default so that too much, rather than
too little, gets displayed if the browser doesn't support such
manipulation.
 
Reply With Quote
 
@SM
Guest
Posts: n/a
 
      12-15-2003
Thomas 'PointedEars' Lahn a ecrit :

> See <(E-Mail Removed)> for details.


Hello,
what do I do with that :
<(E-Mail Removed)>
???
How to use it ?

Danke


--
************************************************** ************
Stéphane MORIAUX : (E-Mail Removed)

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      12-16-2003
"@SM" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Thomas 'PointedEars' Lahn a ecrit :
>
> > See <(E-Mail Removed)> for details.

>
> Hello,
> what do I do with that :
> <(E-Mail Removed)>
> ???
> How to use it ?


One option is to go to:-

<URL: http://groups.google.com/advanced_group_search >

and enter it (cut and paste) into the field labelled
"Message ID -- Find the message with message ID" (or as translated
into French?).

Richard.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
asp:checkbox hide/show text/fields when it's clicked without doing a postback? UJ ASP .Net 4 04-24-2009 04:50 PM
show hide divs - show last state upon reload/post ll Javascript 2 05-01-2008 12:15 PM
hide & show divs with different text msgs in the same place on the screen??? tlyczko Javascript 5 12-08-2005 03:04 AM
Show / Hide Text Miguel Dias Moura ASP .Net 3 09-28-2004 04:43 PM
Show/Hide text and form field based on drop down selection Steve Speirs Javascript 0 06-27-2003 12:19 PM



Advertisments