Joomla et Mootools : combiner un slide toggle avec un scroll
Bonjour,
J'essaye de réaliser un site sous joomla sous la forme d'un one page responsive à l'aide d'un template adequat.
Vous pouvez voir le tout début ici : http://www.salon-bioharmonies.com.
Mon objectif, pour le moment, est d'adapter la structure à ce que j'ai en tête c.a.d que :
- lorsque le visiteur clique sur un lien de menu cela descend la page jusqu'au bon niveau (ca c'est bon car déjà integrer au template)
- ensuite lorsqu'il arrive à la rubrique choisit il a, selon la rubrique, plusieurs choix. C'est ici que j'ai commencé à adapter le template en utilisant un script trouvé sur le site mootools et qui me permet d'ouvrir ou fermer la sous rubrique avec un toggle et en slide vertical.
Pour cela j'ai utilisé les fonctionnalité joomla afin e ne pas trop bidouiller dans les fichiers et laisser joomla gérer le truc. Il m'a suffit, enfin après de longues recherches et de nombreux essais, de donner un ID aux différents éléments et d'inserer le code JS grace à une extention qui s'appelle sourcerer et qui permet d'entrer du code ou l'on veut dans joomla. (ca aussi ca marche). Vous pouvez voir le fonctionnement à la rubrique infos pratiques en cliquant sur les différents icones ( horaires et tarifs,...)
C'est après que je coince, car je voudrais que lorsque l'on clique sur la sous rubrique le slide s'ouvre mais en même temps il faudrait que la page remonte au niveau de la sous rubrique ouverte. Je sais que c'est une fonction lié au scroll du genre :
Code:
1
2
| var scrollExample = new Fx.Scroll($('scrollExample'));
scrollExample.toElement('fxScrollWindowExample'); |
Ce que je ne sais pas faire c'est combiner les deux fonctions, j'ai fait un essai avec la sous rubrique invitation gratuite mais le slide ne fonctionne plus et lors du clic cela me ramène en haut de la page.
Voici le script qui fonctionne pour le slide des sous rubriques :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script language="javascript" type="text/javascript">
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
// -- nous contacter
var myverticalSlide = new Fx.Slide('nous_contacter', {mode: 'vertical'}).slideOut();
$('togcontact').addEvent('click', function(event){
event.stop();
myverticalSlide.toggle();
});
});
</script> |
et celui ou j'essaye de combiner les deux, c'est la version actuellement en ligne mais j'ai fait de nombreux autres essais avant qui donnait à peu près tous le même résultat :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script language="javascript" type="text/javascript">
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
// -- invitation gratuite
var myverticalSlide = new Fx.Slide('invitation', {mode: 'vertical'}).slideOut();
$('toginvitation').addEvent('click', function(event){
event.stop();
myverticalSlide.toggle();
event.Scroll(window).toElement('invitation');
});
});
</script> |
J'ai fait plusieurs essais depuis donc la version en ligne peut être différente même si ce ne fonctionne toujours pas :(
Voila si quelque peut me donner une piste car j'avoue que j'ai le cerveau qui fume :koi:
Toc toc il y a encore quelqu'un ?
