salut à tous, j'aimerais bien apprendre à faire des effets que la librairie mootols nous permet de faire, j'ai donc décider de prendre intégralement le tutoriel Fx.Slide Demo du site de mootols pour voir comment cela s'exécute mais seulement il ne fonctionne pas en local et je ne sais pas ce qui ne va pas, j'ai fouiller sur le forum et j'ai vu des problèmes similaire qui n'ont pas été résolu.Aidez moi s'il vous plait !

code html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
<!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=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="demo.js"></script>
	<title>Fx.Slide Demo</title>
</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>
code js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
//-vertical
 
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();
});
code css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#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;
}