De bedoeling is als je op de text "Ik ben mijn wachtwoord vergeten" klikt, het login venster links verdwijnt via de fx.slide en de display op none word gezet. Nadat dit gedaan is, moet de display van de wachtwoord vergeten form op block gezet worden en deze weer verschijnen via de fx.slide.
Echter, ben ik een leek in javascript, maar toch een poging gewaagd. Ik zit alleen nu in loopje waar de formpjes zich afwisselen. Dit komt omdat de on complete functies zich de heletijd herhalen.
Mijn vraag aan jullie hoe ik uit deze lus kom.
Javascript
<?php //voor kleurtjes
<script type="text/javascript">
window.addEvent('domready', function() {
var SliderLogin = new Fx.Slide('login-div', {mode: 'horizontal'});
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
/*
Fx.Slide.implement({
isVisible: function() {
return (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) ? false: true;
}
});
*/
SliderEmail.hide();
$('login-switch').addEvent('click', function(e){
if(SliderLogin.isVisible() == true)
{
e.stop();
SliderLogin.toggle();
SliderLogin.addEvent('complete', function(e){
$('login-div').style.display = 'none';
$('forgotpass-div').style.display = 'block';
$('login-switch').set('html', '<a href="javascript:void(0);" id="login-switch">Inloggen</a>');
SliderEmail.slideOut();
});
}
else
{
e.stop();
SliderEmail.toggle();
SliderEmail.addEvent('complete', function(e){
$('forgotpass-div').style.display = 'none';
$('login-div').style.display = 'block';
$('login-switch').set('html', '<a href="javascript:void(0);" id="login-switch">Ik ben mijn wachtwoord vergeten</a>');
SliderLogin.slideOut();
});
}
});
});
</script>
?>
Stuk HTML
<?php //kleurtjes
<body>
<div class="login">
<div class="screen">
<div class="login-left" id="login-left">
<img src="images/logo_beeldmerk.png" alt="">
</div>
<div class="login-right">
<div class="loginscreen">
<h1><b>MEDIAFLUX</b>CMS</h1>
<div class="login-input" id="login-div">
<form name="login" action="">
<input type="text" id="firstname" name="firstname" class="username">
<input type="text" id="password" name="password" class="password">
<div class="login-submit">
<input type="submit" name="btnLogin" value="Inloggen" />
</div>
</form>
</div>
<div class="forgotpass-input" id="forgotpass-div" style="display: none;">
<input type="text" id="email" name="email" class="email">
<div></div>
<div class="login-submit">
<input type="submit" name="btnLogin" value="Inloggen" />
</div>
</div>
<div class="forgotpassword" id="login-switch">
<a href="javascript:void(0);" id="login-switch">Ik ben mijn wachtwoord vergeten</a>
</div>
</div>
</div>
</div>
</div>
</body>
?>
Hier staat het live en dus bugged