[MooTools] Fx.Slide
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
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
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
<?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>
?>
<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
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
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
<?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>
?>
<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
Gewijzigd op 01/01/1970 01:00:00 door W W
Je hebt volgens mij ook niet echt gekeken wat die fx.slider doet...
(Iig als je toggle aanroept.)
Kijk eens in firefox met firebug. Kun je zo alles aanroepen. Ga d'r regel voor regel doorheen.... (Zoals je debug't.)
Mvg.
Pepijn schreef op 29.04.2009 21:14:
Kijk eens naar mijn voorbeeld svp.
Schat, wat denk je dat ik heb gedaan?
Pepijn schreef op 29.04.2009 21:14:
Die oncomplete worden elke keer na elkaar uitgevoerd waardoor hij niet meer stopt.
Je zit niet in een lus, omdat die javascript niet klopt.
Firefox geeft deze waarschuwing:
Code (php)
1
2
3
2
3
invalid break
[Break on this error] break;\n
website (line 36)
[Break on this error] break;\n
website (line 36)
En Opera deze:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
JavaScript - http://www.mediaflux.nl/klanten/zsp%2B/website/
Inline script compilation
Syntax error while loading: line 30 of inline script at http://www.mediaflux.nl/klanten/zsp%2B/website/ :
Untargeted break/continue
});
-------^
Inline script compilation
Syntax error while loading: line 30 of inline script at http://www.mediaflux.nl/klanten/zsp%2B/website/ :
Untargeted break/continue
});
-------^
Dus
Pepijn schreef op 29.04.2009 21:02:
lIk haal het eruit want het heeft geen nut en zal waarschijnlijk meer kwaad doen dan goed.
Heb je nog niet gedaan. Verwacht je dan dat ik je verder ga helpen?
Pepijn schreef op 29.04.2009 21:14:
Ik debug met chrome en die geeft geen fouten aan. Onderaan in mijn 1e post staat een link.
Lekker handig debuggen, geen foutmeldingen...
Die link klopt ook echt lekker:
Code (php)
1
http://phphulp.nl/forum/%22http://www.mediaflux.nl/klanten/zsp%2B/website/%22
Pepijn schreef op 29.04.2009 21:02:
lol, die break was een "ik heb geen oplossingen" probeersel.
Als je al logisch nadenkt (dus gewoon aan php denkt) kán die break daar niet.
Breaks zijn eruit.
De url blijkt gewoon te werken.
Misschien zit hij TECHNISCH niet in een lus. Maar als je de link ziet, lijkt het wel alsof hij in een lus zit.
Gr.
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
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
<?php
<script type="text/javascript">
window.addEvent('domready', function() {
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
var username = $('customernumber');
var password = $('password');
var email = $('email');
username.addEvent('click', function(e){
username.value = '';
});
username.addEvent('blur', function(e){
username.value = 'Klantennummer';
});
password.addEvent('click', function(e){
password.value = '';
});
password.addEvent('blur', function(e){
password.value = 'Wachtwoord';
});
email.addEvent('click', function(e){
email.value = '';
});
email.addEvent('blur', function(e){
email.value = 'E-mail adres';
});
/*
Fx.Slide.implement({
isVisible: function() {
return (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) ? false: true;
}
});
*/
SliderEmail.hide();
$('forgotpass-div').style.display = 'none';
});
function switchLogin()
{
var SliderLogin = new Fx.Slide('login-div', {mode: 'horizontal'});
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
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" onclick="javascript:switchForgotPassword()">Inloggen</a>');
SliderEmail.toggle();
});
}
function switchForgotPassword()
{
var SliderLogin = new Fx.Slide('login-div', {mode: 'horizontal'});
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
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" onclick="javascript:switchLogin()">Ik ben mijn wachtwoord vergeten</a>');
SliderLogin.toggle();
});
}
</script>
?>
<script type="text/javascript">
window.addEvent('domready', function() {
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
var username = $('customernumber');
var password = $('password');
var email = $('email');
username.addEvent('click', function(e){
username.value = '';
});
username.addEvent('blur', function(e){
username.value = 'Klantennummer';
});
password.addEvent('click', function(e){
password.value = '';
});
password.addEvent('blur', function(e){
password.value = 'Wachtwoord';
});
email.addEvent('click', function(e){
email.value = '';
});
email.addEvent('blur', function(e){
email.value = 'E-mail adres';
});
/*
Fx.Slide.implement({
isVisible: function() {
return (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) ? false: true;
}
});
*/
SliderEmail.hide();
$('forgotpass-div').style.display = 'none';
});
function switchLogin()
{
var SliderLogin = new Fx.Slide('login-div', {mode: 'horizontal'});
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
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" onclick="javascript:switchForgotPassword()">Inloggen</a>');
SliderEmail.toggle();
});
}
function switchForgotPassword()
{
var SliderLogin = new Fx.Slide('login-div', {mode: 'horizontal'});
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
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" onclick="javascript:switchLogin()">Ik ben mijn wachtwoord vergeten</a>');
SliderLogin.toggle();
});
}
</script>
?>