Tekst verbergen
Is er een mogelijkheid dat wanneer er op een checkbox geklikt wordt er een extra stuk pagina onder wordt weergegeven.
Ja, dat kan met javascript.....
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function show_ell()
{
if (document.getElementById("checkbox").checked == true)
{
document.getElementById("element").display = ""
}
else
{
document.getElementById("element").display = "none"
}
}
</script>
<input type="checkbox" onclick="show_ell()" id="checkbox">
<div id="element" style="display : none">
tekst
</div>
function show_ell()
{
if (document.getElementById("checkbox").checked == true)
{
document.getElementById("element").display = ""
}
else
{
document.getElementById("element").display = "none"
}
}
</script>
<input type="checkbox" onclick="show_ell()" id="checkbox">
<div id="element" style="display : none">
tekst
</div>
Edit:
Even een aan uit check ingebouwd
Even een aan uit check ingebouwd
Gewijzigd op 01/01/1970 01:00:00 door Jacco Engel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
<!--
.demo {visibility:hidden;}
-->
</style>
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>
<!--
.demo {visibility:hidden;}
-->
</style>
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>
Alleen is het nu zo dat in het gedeelte waar de div tevoorschijn komt, nu al bij ons een witte open ruimte staat. Dit ziet er natuurlijk niet uit, hoe is dat op te lossen dat de layout pas langer word als er op de checkbox is geklikt ?
Gewijzigd op 01/01/1970 01:00:00 door Tristan
Dsiplay : none
Waar moet deze precies komen? Want als we deze in de div zetten word hij niet weergeven (ook met Jacco zijn stuk code niet) en in de CSS ook niet ...
Bij visibility neemt de div namelijk gewoon de ruimte in die de div verwacht, alleen zie je hem niet, omdat die onzichtbaar wordt gemaakt. Bij display: none neemt de div niet die ruimte in, omdat de div niet te zien is (display, laten zien). Wil je de div dan wel laten zien kan je met JS de property op "" (niets) zetten, of een andere property, bijvoorbeeld block.
Elwin
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script language="javascript">
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>
<style>
div#commentForm
{
margin: 0px 20px 0px 20px;
display: none;
}
</style>
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>
<style>
div#commentForm
{
margin: 0px 20px 0px 20px;
display: none;
}
</style>
Het 2e gedeelte waar de functie gebruikt word:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<a href="javascript:toggleLayer('commentForm');" title="Add a comment to this entry">
JA
</a>
<div id="commentForm">
<form method="post" >
Selecteer hieronder het aantal waarden dat je wilt toevoegen aan deze Multivalue<p>
<input type="text" name="aantal">
<input type="submit" name="next" value="Klik"><BR><BR>
</form>
<?
if ($_POST["next"])
{
$status = 1;
$aantal = $_POST['aantal'];
?>
<form method="post">
<?
for ($x = 1; $x < $aantal+1; $x++)
{ ?>
<input type="text" name="multiwaarden<?=$x?>" ><BR>
<input type="hidden" name="aantal" value="<?=$aantal?>">
<?
}
?>
<input type="submit" name="voegveldentoe" value="Voeg toe">
</form>
<?
}
if ($_POST["voegveldentoe"])
{
$aantal = $_POST['aantal'];
for ($x =1; $x < $aantal; $x++)
{
$veld[] = $_POST["multiwaarden$x"];
}
$_SESSION["multivalue_waarden"] = $veld;
}
?>
</div>
JA
</a>
<div id="commentForm">
<form method="post" >
Selecteer hieronder het aantal waarden dat je wilt toevoegen aan deze Multivalue<p>
<input type="text" name="aantal">
<input type="submit" name="next" value="Klik"><BR><BR>
</form>
<?
if ($_POST["next"])
{
$status = 1;
$aantal = $_POST['aantal'];
?>
<form method="post">
<?
for ($x = 1; $x < $aantal+1; $x++)
{ ?>
<input type="text" name="multiwaarden<?=$x?>" ><BR>
<input type="hidden" name="aantal" value="<?=$aantal?>">
<?
}
?>
<input type="submit" name="voegveldentoe" value="Voeg toe">
</form>
<?
}
if ($_POST["voegveldentoe"])
{
$aantal = $_POST['aantal'];
for ($x =1; $x < $aantal; $x++)
{
$veld[] = $_POST["multiwaarden$x"];
}
$_SESSION["multivalue_waarden"] = $veld;
}
?>
</div>
Het 2e gedeelte is er voor bedoeld dat je tussendoor een aantal waardes kunt invullen. Je word hier verzocht eerst een 'x' getal in te toetsen, Klik op ok, en vervolgens worden er 'x' vakjes weergeven die je moet invullen. Nadat deze zijn ingevuld wil ik dat ze terug naar de pagina worden gepost dmv een sessie, zodat ze een paar paginas verder nog opgeroepen kunnen worden...