Folding closed space for a hidden form

**Martin Kurz** · Aug 11 '05, 07:45 PM

Re: Folding closed space for a hidden form

Hello,

web_design schrieb:[color=blue]
> I'm making a form that is hidden until someone clicks on a link to open it.
> I can hide the form, but there is just a large white space on the screen
> where the form is hiding. Is there any way to close the white space when
> the form is not showing? At the moment I'm using a <div> and hiding the
> visibility, and then making it visible when the link is clicked:
>
> <div id="form" style="visibili ty: hidden; etc...[/color]

Just set the divs display to none instead of visibility to hidden, that's all.

Some Background: Visibilty just makes the div invisible without taking the room,
the div would take if it would be visible. A div is a block-Tag, so you can
switch a div on and off by setting display to block or none.

**web_design** · Aug 11 '05, 07:55 PM

Re: Folding closed space for a hidden form

"Martin Kurz" <info@martinkur z.in-berlin.de> wrote in message
news:1123788742 .201128@elch.in-berlin.de...[color=blue]
> Hello,
>
> web_design schrieb:[color=green]
>> I'm making a form that is hidden until someone clicks on a link to open
>> it.
>> I can hide the form, but there is just a large white space on the screen
>> where the form is hiding. Is there any way to close the white space when
>> the form is not showing? At the moment I'm using a <div> and hiding the
>> visibility, and then making it visible when the link is clicked:
>>
>> <div id="form" style="visibili ty: hidden; etc...[/color]
>
> Just set the divs display to none instead of visibility to hidden, that's
> all.
>
> Some Background: Visibilty just makes the div invisible without taking the
> room,
> the div would take if it would be visible. A div is a block-Tag, so you
> can
> switch a div on and off by setting display to block or none.[/color]

Thanks for that tip. It works great.

Do you know if there is an easy way to set my link to *toggle* the display?
Right now I have a link that shows the form, but to close it I had to make a
separate button on the form. I'd prefer that someone could click on the
link to open it, and then click again to close it.

This is my link:
<a href="javascrip t://" onClick="showfo rm('commentform ')">

**ASM** · Aug 11 '05, 09:25 PM

Re: Folding closed space for a hidden form

web_design wrote:[color=blue]
> Is there any way to close the white space when
> the form is not showing? At the moment I'm using a <div> and hiding the
> visibility, and then making it visible when the link is clicked:
>
> <div id="form" style="visibili ty: hidden; etc...[/color]

if you like yoyo efects :

<did id="form" style="visibili ty:hidden;displ ay:none" ...>

onclick="with(d ocument.getElem entById('form') .style){
visibility='vis ible';
display='block' ;
}"

--
Stephane Moriaux et son [moins] vieux Mac

**ASM** · Aug 11 '05, 09:25 PM

Re: Folding closed space for a hidden form

web_design wrote:[color=blue]
> I'd prefer that someone could click on the
> link to open it, and then click again to close it.
>
> This is my link:
> <a href="javascrip t://" onClick="showfo rm('commentform ')">[/color]

function showform(mydiv) {
var d = document.getEle mentById(mydiv) .style;
d.display = (d.display=='vi sible')? 'hidden' : 'visible';
}

--
Stephane Moriaux et son [moins] vieux Mac

**Mick White** · Aug 11 '05, 10:45 PM

Re: Folding closed space for a hidden form

ASM wrote:
[color=blue]
> web_design wrote:
>[color=green]
>> I'd prefer that someone could click on the link to open it, and then
>> click again to close it.
>>
>> This is my link:
>> <a href="javascrip t://" onClick="showfo rm('commentform ')">[/color]
>
>
> function showform(mydiv) {
> var d = document.getEle mentById(mydiv) .style;
> d.display = (d.display=='vi sible')? 'hidden' : 'visible';
> }
>[/color]
d.display=d.dis play=='none'?'' :'none';

Mick

**ASM** · Aug 11 '05, 11:15 PM

Re: Folding closed space for a hidden form

Mick White wrote:[color=blue]
> ASM wrote:
>[color=green]
>> function showform(mydiv) {
>> var d = document.getEle mentById(mydiv) .style;
>> d.display = (d.display=='vi sible')? 'hidden' : 'visible';
>> }
>>[/color]
> d.display=d.dis play=='none'?'' :'none';
>
> Mick[/color]

Oooppss ! :-(

but (as I think default is 'none')

d.display=d.dis play=='none'?'b lock':'none';

--
Stephane Moriaux et son [moins] vieux Mac

**RobG** · Aug 12 '05, 03:15 AM

Re: Folding closed space for a hidden form

ASM wrote:[color=blue]
> Mick White wrote:
>[color=green]
>> ASM wrote:
>>[color=darkred]
>>> function showform(mydiv) {
>>> var d = document.getEle mentById(mydiv) .style;
>>> d.display = (d.display=='vi sible')? 'hidden' : 'visible';
>>> }
>>>[/color]
>> d.display=d.dis play=='none'?'' :'none';
>>
>> Mick[/color]
>
>
> Oooppss ! :-(
>
> but (as I think default is 'none')
>
> d.display=d.dis play=='none'?'b lock':'none';
>[/color]

If you toggle between '' and 'none' (as suggested by Mick) it will work
for any element, block or otherwise. There are 13 different values for
the display attribute in the default HTML 4 style sheet, though not all
browsers support all of them.

<URL:http://www.w3.org/TR/2005/WD-CSS21-20050613/sample.html>

--
Rob

**ASM** · Aug 12 '05, 08:35 AM

Re: Folding closed space for a hidden form

RobG wrote:[color=blue]
> ASM wrote:
>[color=green]
>> Mick White wrote:
>>[color=darkred]
>>> ASM wrote:
>>>
>>>> function showform(mydiv) {
>>>> var d = document.getEle mentById(mydiv) .style;
>>>> d.display = (d.display=='vi sible')? 'hidden' : 'visible';
>>>> }
>>>>
>>> d.display=d.dis play=='none'?'' :'none';
>>>
>>> Mick[/color]
>>
>> Oooppss ! :-(
>>
>> but (as I think default is 'none')
>>
>> d.display=d.dis play=='none'?'b lock':'none';
>>[/color]
>
> If you toggle between '' and 'none' (as suggested by Mick) it will work
> for any element, block or otherwise.[/color]

Usually : yes

However, What I wanted to say was
the div(s) to show/hide is(are) 1st styled with { display: none }
so, I think the correct code would have to be :

d.display=d.dis play=='none'?'b lock':'none';

Of course, to be compatible with eventual disabled JS
it would be better :
- to use a function to hide the shown div(s)
- then to use Mick's code

--
Stephane Moriaux et son [moins] vieux Mac

**RobG** · Aug 12 '05, 09:15 AM

Re: Folding closed space for a hidden form

ASM wrote:[color=blue]
> RobG wrote:
>[color=green]
>> ASM wrote:
>>[color=darkred]
>>> Mick White wrote:
>>>
>>>> ASM wrote:
>>>>
>>>>> function showform(mydiv) {
>>>>> var d = document.getEle mentById(mydiv) .style;
>>>>> d.display = (d.display=='vi sible')? 'hidden' : 'visible';
>>>>> }
>>>>>
>>>> d.display=d.dis play=='none'?'' :'none';
>>>>
>>>> Mick
>>>
>>>
>>> Oooppss ! :-(
>>>
>>> but (as I think default is 'none')
>>>
>>> d.display=d.dis play=='none'?'b lock':'none';
>>>[/color]
>>
>> If you toggle between '' and 'none' (as suggested by Mick) it will
>> work for any element, block or otherwise.[/color]
>
>
> Usually : yes
>
> However, What I wanted to say was
> the div(s) to show/hide is(are) 1st styled with { display: none }
> so, I think the correct code would have to be :
>
> d.display=d.dis play=='none'?'b lock':'none';[/color]

That infers that '' is incorrect, which it isn't. Setting the display
to '' means that it will return to the default or whatever it might
have been set to in a style rule.

Using none/'' has further benefits as: the OP is free to apply a
display attribute via CSS rule should that be required at some later
time without any modification to the script; and the script is
suitable for any element, not just those that have display:block by
default.

Some scripts toggle using none/block for table elements, which works
fine in some browsers but not in those where table elements are styled
with the appropriate CSS table display attribute values (table-cell,
table-row, etc.). On the other hand, none/'' will work fine for both.

In light of the above, I think none/'' is a better solution.

[...]

--
Rob

**ASM** · Aug 12 '05, 09:25 AM

Re: Folding closed space for a hidden form

RobG wrote:[color=blue]
> Setting the display
> to '' means that it will return to the default or
> whatever it might have been set to in a style rule.[/color]
--------------------^-----------^

OK, I'll try to remember :-)

--
Stephane Moriaux et son [moins] vieux Mac

Folding closed space for a hidden form

Folding closed space for a hidden form

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment