Ik heb moeite met dit script

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

21/12/2014 13:46:53
Quote Anchor link
Hallo allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!-- 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>


Het html-gedeelte waar ik mee wil starten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
PHP hulp

PHP hulp

26/11/2020 21:37:00
 
- Ariën -
Beheerder

- Ariën -

21/12/2014 13:50:21
Quote Anchor link
Wat zegt je Debug-console (Ctrl+Shift+J) ?
 
George van Baasbank

George van Baasbank

21/12/2014 13:53:34
Quote Anchor link
Aar,

Helemaal niets

Toevoeging op 21/12/2014 13:54:22:

Dit is mijn site: http://beeldenvankwaliteit.nl/login/index2.php
 
- Ariën -
Beheerder

- Ariën -

21/12/2014 14:03:07
Quote Anchor link
Moet je niet id="form_wrapper" gebruiken in je form-tag?
 
George van Baasbank

George van Baasbank

21/12/2014 14:15:47
Quote Anchor link
Maakt geen verschil

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
- Ariën -
Beheerder

- Ariën -

21/12/2014 14:29:58
Quote Anchor link
Zet eerst maar eens je scripts netjes in de <head> sectie van je HTML-document. ;-)
Dat maakt de boel in ieder geval al overzichtelijker.
Gewijzigd op 21/12/2014 14:30:53 door - Ariën -
 
George van Baasbank

George van Baasbank

21/12/2014 14:45:43
Quote Anchor link
Dan krijg je dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
- Ariën -
Beheerder

- Ariën -

21/12/2014 14:51:02
Quote Anchor link
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

Je zult dus zelf wat moeten doen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$(".formfield").submit();

Waarbij je elk formfield deze class mee geeft.
 
Pipo Clown

Pipo Clown

21/12/2014 14:56:31
Quote Anchor link
Ik denk dat het wel prettig is wanneer je een heel klein beetje weet waar je mee bezig bent wanneer je zoiets wilt realiseren.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.