Ik heb moeite met dit script
Omdat mijn Engels niet echt goed is en ook mijn kennis van JS het nodige ontbreekt, roep ik jullie hulp in.
Van de website http://tympanus.net/codrops/2011/01/06/animated-form-switching/ heb ik een inlogformulier gedownload.
Ik heb dit formulier al wel naar het Nederlands kunnen omzetten maar de buttons werken nog niet.
In onderstaande code wordt aangegeven dat de buttons uitgezet zijn en dat deze op de een of andere manier aangezet moeten worden. Daar schuilt voor mij het probleem. Ik kan hier geen soep van koken.
Wie kan/wil mij verder helpen?
Java-script
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
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
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
Het html-gedeelte waar ik mee wil starten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form class="login active" >
<h3>Login BVK</h3>
<div>
<label>Gebruikersnaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Ingelogd blijven</span></div>
<input type="submit" value="Login" /></a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
<h3>Login BVK</h3>
<div>
<label>Gebruikersnaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Ingelogd blijven</span></div>
<input type="submit" value="Login" /></a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
Helemaal niets
Toevoeging op 21/12/2014 13:54:22:
Dit is mijn site: http://beeldenvankwaliteit.nl/login/index2.php
Toevoeging op 21/12/2014 14:16:50:
Ook een "action" in de form < form > helpt niet
Toevoeging op 21/12/2014 14:18:07:
Complete html:
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
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
<div id="form_wrapper" class="form_wrapper">
<form class="register">
<h3>Register</h3>
<div class="column">
<div>
<label>Voornaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Tussenvoeg:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Familienaam</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Gebruikersnaam:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>E-mailadres:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord:</label>
<input type="password" />
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Stuur mij aanvullingen</span>
</div>
<input type="submit" value="Registreren" />
<a href="index.html" rel="login" class="linkform">U heeft al een account? Log hier in</a>
<div class="clear"></div>
</div>
</form>
<form class="login active" >
<h3>Login BVK</h3>
<div>
<label>Gebruikersnaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Ingelogd blijven</span></div>
<input type="submit" value="Login" /></a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
<form class="forgot_password">
<h3>Wachtwoord vergeten</h3>
<div>
<label>Gebruikersnaam of e-mailadres:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"/>
<a href="index.html" rel="login" class="linkform">Login bekend? Log hier in</a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<form class="register">
<h3>Register</h3>
<div class="column">
<div>
<label>Voornaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Tussenvoeg:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Familienaam</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Gebruikersnaam:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>E-mailadres:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord:</label>
<input type="password" />
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Stuur mij aanvullingen</span>
</div>
<input type="submit" value="Registreren" />
<a href="index.html" rel="login" class="linkform">U heeft al een account? Log hier in</a>
<div class="clear"></div>
</div>
</form>
<form class="login active" >
<h3>Login BVK</h3>
<div>
<label>Gebruikersnaam:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Wachtwoord: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Ingelogd blijven</span></div>
<input type="submit" value="Login" /></a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
<form class="forgot_password">
<h3>Wachtwoord vergeten</h3>
<div>
<label>Gebruikersnaam of e-mailadres:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"/>
<a href="index.html" rel="login" class="linkform">Login bekend? Log hier in</a>
<a href="register.html" rel="register" class="linkform">U heeft nog geen account? Registreer u hier</a>
<div class="clear"></div>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
Dat maakt de boel in ieder geval al overzichtelijker.
Gewijzigd op 21/12/2014 14:30:53 door - Ariën -
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
90
91
92
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
90
91
92
<head>
<link rel="stylesheet" type="text/css" href="css/bvk.css" />
<!-- Inlogsysteem -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
Cufon.replace('h3',{ textShadow: '1px 1px #000'});
Cufon.replace('.back');
</script>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
</head>
<link rel="stylesheet" type="text/css" href="css/bvk.css" />
<!-- Inlogsysteem -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
Cufon.replace('h3',{ textShadow: '1px 1px #000'});
Cufon.replace('.back');
</script>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
</head>
Quote:
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
Je zult dus zelf wat moeten doen.
Code (php)
1
$(".formfield").submit();
Waarbij je elk formfield deze class mee geeft.
ik zie regelmatig <input /> staan, de slash aan het eind is alleen nodig bij bepaalde HTML versies, bv. XML. In je code zie ik nergens naar voren komen welk type jij gebruikt.
Ook het eerder opgemerkte "action" veld van het formulier mis ik.
In het javascript zie ik de class "linkform" staan, in je HTML code zie ik deze nergens terug.
Gebruik het console eens om eerst eens te kijken welke errors er allemaal in zitten en haal deze er uit. Misschien dat het daarna allemaal een beetje duidelijker wordt voor je.
Gewijzigd op 21/12/2014 14:57:58 door Pipo Clown