Mootools et l'utilisation de la fonction fx.slide

Firfin

16 Sep 2007 à 22:39

Bonjour,

Je suis nouveau ici et j'essaye d'utiliser les outils de Mootools. Pour aller au plus simple, je vous montre mon code actuel :

Page HTML

<!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" xmlns:v="urn:schemas-microsoft-com:vml">

<html>

<head>
<title>Test, fonction recherche halo.fr</title>

<!-- inclusion du fichier Mootools-->
<script type="text/javascript" src="mootools.v1.11.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>

<body>

 
 
<div id="test20">
<table border="0">
<tr><td>
<div id="test21"><form><INPUT type=text name="recherche"><input type="submit"></form></div>
</td><td>
<div id="test22">Rechercher</div>
</td>
</tr>
</table>
</div>

<script type="text/javascript" src="code.js"></script>

</body>
</html>

code.js

//--horizontal

var mySlide2 = new Fx.Slide('test21', {mode: 'horizontal'}).hide();
 
$('test22').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});

style.css

#test {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}

#test20 {
	width: 400px;
	color: #000000;
	padding: 10px;
	margin: 20px;
	vertical-align: top;
}

#test22 {
	width: 100px;
	background: #ffffff;
	color: #000000;
}

Et bien sur le fichier mootools.v1.11.js que l'on peut télécharger ici en sélectionnant fx.slide :
http://mootools.net/download

Maintenant mon souci !

J'aimerais faire la même chose, mais sur la droite du site avec un effet inverse.
Et je ne parviens pas à faire en sorte qu'a l'affichage de la page le "Rechercher" soit bien sur le bord de la page.

Merci de votre aide Smiley smile