Folding closed space for a hidden form

[web_design]

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="visibility: hidden; etc...

[Martin Kurz]

Hello,

web_design schrieb:

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="visibility: hidden; etc...

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]

"Martin Kurz" <in**@martinkurz.in-berlin.de> wrote in message
news:11***************@elch.in-berlin.de...

Hello,

web_design schrieb:

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="visibility: hidden; etc...

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.

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="javascript://" onClick="showform('commentform')">

[ASM]

web_design wrote:

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="visibility: hidden; etc...

if you like yoyo efects :

<did id="form" style="visibility:hidden;display:none" ...>

onclick="with(document.getElementById('form').styl e){
visibility='visible';
display='block';
}"
--
Stephane Moriaux et son [moins] vieux Mac

[ASM]

web_design wrote:

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="javascript://" onClick="showform('commentform')">

function showform(mydiv) {
var d = document.getElementById(mydiv).style;
d.display = (d.display=='visible')? 'hidden' : 'visible';
}
--
Stephane Moriaux et son [moins] vieux Mac

[Mick White]

ASM wrote:

web_design wrote:

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="javascript://" onClick="showform('commentform')">

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

d.display=d.display=='none'?'':'none';

Mick

[ASM]

Mick White wrote:

ASM wrote:

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

d.display=d.display=='none'?'':'none';

Mick

Oooppss ! :-(

but (as I think default is 'none')

d.display=d.display=='none'?'block':'none';

--
Stephane Moriaux et son [moins] vieux Mac

[RobG]

ASM wrote:

Mick White wrote:

ASM wrote:

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

d.display=d.display=='none'?'':'none';

Mick

Oooppss ! :-(

but (as I think default is 'none')

d.display=d.display=='none'?'block':'none';

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]

RobG wrote:

ASM wrote:

Mick White wrote:

ASM wrote:

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

d.display=d.display=='none'?'':'none';

Mick

Oooppss ! :-(

but (as I think default is 'none')

d.display=d.display=='none'?'block':'none';

If you toggle between '' and 'none' (as suggested by Mick) it will work
for any element, block or otherwise.

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.display=='none'?'block':'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]

ASM wrote:

RobG wrote:

ASM wrote:

Mick White wrote:

ASM wrote:

> function showform(mydiv) {
> var d = document.getElementById(mydiv).style;
> d.display = (d.display=='visible')? 'hidden' : 'visible';
> }
>
d.display=d.display=='none'?'':'none';

Mick
Oooppss ! :-(

but (as I think default is 'none')

d.display=d.display=='none'?'block':'none';

If you toggle between '' and 'none' (as suggested by Mick) it will
work for any element, block or otherwise.

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.display=='none'?'block':'none';

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]

RobG wrote:

Setting the display
to '' means that it will return to the default or
whatever it might have been set to in a style rule.

--------------------^-----------^

OK, I'll try to remember :-)

--
Stephane Moriaux et son [moins] vieux Mac