toggle met mootools
Als voorbeeld probeer ik http://demos.mootools.net/Fx.Slide aan de praat te krijgen. Maar het werkt niet, kunnen jullie iets fout vinden? [noob.js]Of is het puur dat ik de classes e.d. fout aanwijs?[/noob.js]
EDIT: uiteraard heb ik de .js file enzo wel gedownload ;)
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Nieuwe pagina 1</title>
<style type=text/css>
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
</style>
<script src="mootools-release-1.11.js" type="JavaScript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var mySlide = new Fx.Slide('test');
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});
//--horizontal
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});
$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});
$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>
</head>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">
toggle</a> | <a id="hide" href="#">hide</a>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<h3 class="section">Fx.Slide Horizontal</h3>
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a>
| <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Nieuwe pagina 1</title>
<style type=text/css>
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
</style>
<script src="mootools-release-1.11.js" type="JavaScript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var mySlide = new Fx.Slide('test');
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});
//--horizontal
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});
$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});
$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>
</head>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">
toggle</a> | <a id="hide" href="#">hide</a>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<h3 class="section">Fx.Slide Horizontal</h3>
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a>
| <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Patrick van Kampen
Ga het dan pas aanpassen naar jouw wensen; dan weet je tijdens het testen ook makkelijker waar het fout gaat zegmaar.
- mootools downloaden (alles aanklikken!)
- js code van fx.slide overnemen
- css code van fx.slide overnemen
- html code van fx.slide overnemen
Als je die precies hebt overgenomen zou hij moeten werken ;)
Code's extra toegevoegd zijn:
link naar XHTML
Code (php)
1
2
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
links naar js file:
Code (php)
1
<script src="mootools-release-1.11.js" type="JavaScript"></script>
en uiteraard de JScode tussen de volgende code gezet:
Code (php)
1
2
2
window.addEvent('domready', function() {
});
});
geen resultaat :(
EDIT: ik weet dat er mensen zijn die zeggen leer eerst een beetje inzicht krijgen in JS, dit heb ik een heel klein beetje. Het zou idd gewoon moeten werken door alles te kopieëren / plakken van demo site, dit doe ik meestal en van daaruit verder werken ... maar dan moet ik het uiteraard eerst aan de praat krijgen ;)
Gewijzigd op 01/01/1970 01:00:00 door Patrick van Kampen
Code (php)
1
2
3
2
3
window.addEvent('domready', function() {
alert ('hoi');
});
alert ('hoi');
});