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
<!-- 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:
<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>
