bewegend formulier werkt niet
Er zijn 2 links, een voor verder en een voor terug.
Het formulier bestaat uit 3 delen, er hoeft dus maar 2 keer te worden geslide naar het volgende deel.
Ik denk dat (bijna) niemand mij hierbij kan helpen. Want ik zie echt helemaal niets wat er fout is.
Javascript doet bij mij soms echt heel raar.
Het probleem is dat hij maar 1 keer doet sliden, i.p.v 2x.
Bij de tweede keer sliden zou ook de submit button zichtbaar moeten worden, maar dat gebeurt dus ook niet.
Waarschijnlijk wordt de functie van de tweede slide niet uitgevoerd...
Waar kan dit aan liggen?
Als je een voorbeeld wilt zien wat deze code doet, kun je gaan naar:
http://www.gebruikersite.woelmuis.nl/html.html
Dit ben ik tegengekomen op het internet, het voert een heel html bestand uit als je het in de textarea plakt en op "voorbeeld" klikt.
Hier is de code
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
<style>
body {
background-color: black;
color: white;
}
#register-slider {
width: 1000px;
height: 550px;
border: 1px solid lightgrey;
overflow: hidden;
}
#register-slider-content {
width: 6000px;
height: 510px;
border: 1px solid red;
}
.register-div {
width: 800px;
height: 500px;
border: 1px solid lightgrey;
margin-left: 100px;
margin-right: 100px;
float: left;
background-color: #151515;
}
#register-submit {
display: none;
}
</style>
<script>
var pageNumber = "1";
function next() {
if(pageNumber == "1") {
marginNumber = 100;
start1 = setInterval("moveToNext()",10);
} else if(pageNumber != "1") {
start2 = setInterval("moveToNext2()",10);
}
}
function prev() {
}
function moveToNext() {
if(marginNumber > -1000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start1);
marginNumber = -1000;
pageNumber = "2";
}
}
function slideToNext() {
if(marginNumber > -2000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start2);
marginNumber = -2000;
pageNumber = "3";
document.getElementById("register-submit").style.display="inline";
}
}
</script>
</head>
<body>
<form method="post" action="">
<div id="register-slider">
<div id="register-slider-content">
<div id="register-div-1" class="register-div">
<label for="naam">Naam:</label><input type="text" id="naam">
</div>
<div id="register-div-2" class="register-div">
</div>
<div id="register-div-3" class="register-div">
</div>
</div>
</div>
<a href="#">Terug</a>
<a href="#" onClick="next()">Verder</a>
<input type="submit" id="register-submit" value="Verzenden">
</form>
</body>
</html>
<head>
<style>
body {
background-color: black;
color: white;
}
#register-slider {
width: 1000px;
height: 550px;
border: 1px solid lightgrey;
overflow: hidden;
}
#register-slider-content {
width: 6000px;
height: 510px;
border: 1px solid red;
}
.register-div {
width: 800px;
height: 500px;
border: 1px solid lightgrey;
margin-left: 100px;
margin-right: 100px;
float: left;
background-color: #151515;
}
#register-submit {
display: none;
}
</style>
<script>
var pageNumber = "1";
function next() {
if(pageNumber == "1") {
marginNumber = 100;
start1 = setInterval("moveToNext()",10);
} else if(pageNumber != "1") {
start2 = setInterval("moveToNext2()",10);
}
}
function prev() {
}
function moveToNext() {
if(marginNumber > -1000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start1);
marginNumber = -1000;
pageNumber = "2";
}
}
function slideToNext() {
if(marginNumber > -2000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start2);
marginNumber = -2000;
pageNumber = "3";
document.getElementById("register-submit").style.display="inline";
}
}
</script>
</head>
<body>
<form method="post" action="">
<div id="register-slider">
<div id="register-slider-content">
<div id="register-div-1" class="register-div">
<label for="naam">Naam:</label><input type="text" id="naam">
</div>
<div id="register-div-2" class="register-div">
</div>
<div id="register-div-3" class="register-div">
</div>
</div>
</div>
<a href="#">Terug</a>
<a href="#" onClick="next()">Verder</a>
<input type="submit" id="register-submit" value="Verzenden">
</form>
</body>
</html>
Ik zie denk ik wel een fout:
Als je op Verder klikt, word alleen "register-div-1" gebruikt, het script weet dus ook niet beter dat hij alleen div 1 hoeft te verplaatsen, div 2 en 3 worden niet opgemerkt omdat ze niet worden gezocht.
- Jasper
register-div-2 en register-div-3 staan ernaast, ertegenaan.
Het is dus een horizontale lijn van 3 divs die naast elkaar staan. Als de linkse div opzij beweegt, bewegen de 2 andere divs mee.
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
43
44
45
46
47
48
49
50
51
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
43
44
45
46
47
48
49
50
51
<script>
var pageNumber = "1";
function next() {
if(pageNumber == "1") {
marginNumber = 100;
start1 = setInterval("moveToNext()",10);
pageNumber = "2";
} else if(pageNumber == "2") {
start2 = setInterval("moveToNext2()",10);
}
}
function prev() {
}
function moveToNext() {
if(marginNumber > -1000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start1);
marginNumber = -1000;
pageNumber = "2";
}
}
function slideToNext() {
if(marginNumber > -2000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start2);
marginNumber = -2000;
pageNumber = "3";
document.getElementById("register-submit").style.display="inline";
}
}
function moveToNext2() {
if(marginNumber > -4000) {
document.getElementById("register-div-2").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
}
}
function slideToNext2() {
if(marginNumber > -4000) {
document.getElementById("register-div-2").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
}
}
</script>
var pageNumber = "1";
function next() {
if(pageNumber == "1") {
marginNumber = 100;
start1 = setInterval("moveToNext()",10);
pageNumber = "2";
} else if(pageNumber == "2") {
start2 = setInterval("moveToNext2()",10);
}
}
function prev() {
}
function moveToNext() {
if(marginNumber > -1000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start1);
marginNumber = -1000;
pageNumber = "2";
}
}
function slideToNext() {
if(marginNumber > -2000) {
document.getElementById("register-div-1").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
} else {
clearInterval(start2);
marginNumber = -2000;
pageNumber = "3";
document.getElementById("register-submit").style.display="inline";
}
}
function moveToNext2() {
if(marginNumber > -4000) {
document.getElementById("register-div-2").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
}
}
function slideToNext2() {
if(marginNumber > -4000) {
document.getElementById("register-div-2").style.marginLeft = marginNumber;
marginNumber = marginNumber - 10;
}
}
</script>
- Jasper