Slide mootools inverse

Sujet résolu

22 novembre 2009 à 12:48:28

Bonjour à tous,

J'ai installé un effet de slide horizontal Mootools qui marche très bien. Donc pas de pb de code.
Mais cet effet est celui de base de la lib, càd qu'il est collé sur le bord gauche, s'ouvre vers la droite et se referme vers la gauche.
Mon bouton d'ouverture du slide est pour sa part à l'opposé : sur le bord droit de l'écran. J'ai donc cherché à inverser le slide pour qu'il s'ouvre vers la gauche et se referme vers la droite.

Je débute avec jvavascript et mootools et donc je me contente pour le moment de manipuler du code existant. Les suggestions simples sont donc les bienvenues.

D'avance merci

Golmote

22 novembre 2009 à 14:39:09

Pourrait-on voir le code actuel ?
Et/ou peut-être un lien vers la doc de la fonction utilisée... ?

KasP

23 novembre 2009 à 15:45:47

Désolé pour l'attente et merci de l'intéret porté à mon pb malgré mon imprecision.

Voici un lien qui montre l'effet Horizontal Slide dont je parlais. Comme précédemment dit le bloc glisse vers le bord gauche et moi je voudrais qu'il glisse vers le bord droit.

Voici un autre lien dont le code ressemble à ça :

<!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="mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>
	<h1>Fx.Slide</h1>
	<h2>Introduction</h2>
	<p>
		Here goes a nice introduction
	</p>
	
	
	<h3 class="section">Vertical</h3>
	<div class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="v_toggle" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| 
		|
		<a id="v_roll" href="#">roll in out</a>
		<strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		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">Horizontal</h3>
	<div class="marginbottom">
		<a id="h_slideout" href="#">slide out</a>
		|
		<a id="h_slidein" href="#">slide in</a>
		|
		<a id="h_toggle" href="#">toggle</a>
		|
		<a id="h_hide" href="#">hide</a>
		|
		<a id="h_show" href="#">show</a>
		| <strong>status</strong>: <span id="horizontal_status">open</span>
	</div>
	<div id="horizontal_slide">
		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>

et le fichier javascript appelé demo.js à ça :

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide');

	$('v_slidein').addEvent('mouseenter', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});

	$('v_slideout').addEvent('mouseleave', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

	$('v_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.hide();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	$('v_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.show();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	$('v_roll').addEvent('mouseleave', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});
	$('v_roll').addEvent('mouseenter', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});
	
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide.addEvent('complete', function() {
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});


	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});

	$('h_slidein').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideIn();
	});

	$('h_slideout').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideOut();
	});

	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});

	$('h_hide').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.hide();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	$('h_show').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.show();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
});

Tout ça fonctionne avec le framework Mootools.

Pour rappel : le bloc "lorem possum ..." serait en float:right contre bord droit de la fenêtre. Mais ça ne change pas le sens de l'effet. J'ai cherché quelquechose du genre :

var myHorizontalSlide = new Fx.Slide('horizontal_slide_inverse', {mode: 'horizontal_inverse'});

mais j'ai pas trouvé et je ne sais même pas si c'est possible.

D'avance merci à tous

Golmote

23 novembre 2009 à 16:38:27

Bon je viens de mener ma petite enquête...

Déjà, dans le code de Mootools, rien n'est prévu pour permettre cet effet inverse (aucun paramètre méconnu ni rien...)

Après pour ce qui est de le réaliser, c'est surement faisable, mais sans doute pas de la façon dont ils le font.

A savoir qu'actuellement, le slide horizontal est réalisé en diminuant la propriété CSS margin-left de 0 à -xxx (xxx étant la largeur de l'élément).

Mais bien évidemment, diminuer ainsi la propriété margin-right ne donne pas du tout le même résultat, et pas du tout le résultat escompté...

Bref, je ne sais point trop.

lordofcastle

24 novembre 2009 à 9:28:58

Golmote a raison, j'avais cherché et il n'y a pas d'effets de base qui permettent de faire le slide à l'inverse à ma connaissance !
Maintenant tu px le simuler relativement facilement en mettant ta div dans une autre en overflow et augmenter son margin right-left, à priori ca devrait marcher...

Golmote

24 novembre 2009 à 13:18:29

Oui en augmentant le margin-left ça peut fonctionner.

T'as qu'à regarder le fichier qui définit la class Slide et en refaire une autre en te basant sur la première.

KasP

25 novembre 2009 à 11:44:08

Merci de vous être penché la dessus.
Je vais regarder d'un peu plus l'histoire de l'overflow et du le margin-left.
Comme mon soucis principal était de trouver une réponse à "est ce qu'il existe un truc simple pour ..." et que grâce à vous je sais que non, je vais cloturer ce post comme résolu.

Mais je vous tiendrai bien sûr au courrant si je parviens à intégrer cet effet 'manuellement';
En tout cas merci de vos rep.

KasP

MrR4P70R

28 avril 2010 à 2:24:39

Bonsoir à toutes et à tous,

Je suis désolé de détterrer un vieux post

Mais ce type d'inversement m'interesse.

Peut-être pour quelque chose de bien plus simple.

En effet, lorsque l'on utilise la fonction JS slideUp(), cela fais apparraitre la div caché en la déroulant vers le bas.

Ce que je voudrais faire, c'est que lorsque je passe ma souris sur une div par exemple, et bien refaire cet effet de slide, mais que la div a ouvrir se déroule vers le haut.

Auriez-vous une petit idée de comment procéder, si possible sans utiliser moontools.

Je n'sais pas par exemple ... une fonctoin qui inverserait le sens du slide ?

Cordialement,

Golmote

28 avril 2010 à 2:30:49

Quelle "fonction JS slideUp()" ?

MrR4P70R

28 avril 2010 à 2:48:44

Et bien lorsqu'on utilise un .slideUp('normal') par exemple.

Enfin de toute manière je me suis rendu compte qu'avec un slide ce serait trop compliquer

Et donc il ne me reste que le déplacement de div.

Dans mon cas, je voudrais qu'une div qui a était volontairement déplacer vers le haut, hors de l'écran, pour qu'il n'en reste que 2 ou 3px de visible déscende lorsque l'on passe la souris dessus.

Que lorsque cette div est descendu, tant que la souris reste dessus, elle ne bouge pas, et que lorsque l'on déplace la souris hors de cette div, celle-ci remonte à son point de départ.

Est-ce possible ?

PS: en fait je veux créer un menu comme le menu démarrer de Windows avec la barre des taches.

Golmote

28 avril 2010 à 2:51:44

Et t'utilises un framework ou pas ?

EDIT : BTW, tu devrais normalement créer un nouveau topic... >_<

MrR4P70R

28 avril 2010 à 3:45:29

Alors .. je n'sais pas c'que c'est qu'un 'framework' et BTW veux dire ? ^^'

Golmote

28 avril 2010 à 4:01:22

Un framework, c'est une librairie... Mootools, jQuery, Prototype, YUI, Dojo, que sais-je ?

BTW = By The Way

MrR4P70R

28 avril 2010 à 4:03:16

Ah ok

Et bien pour le moment je n'connais que jQuery.

Oui tu as sans doute raison.

Je créer un nouveau post