[Problème] combiner un slide toggle avec un scroll

[fredericS]

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 :

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 :

<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 :

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');
    });
});

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

[fredericS]

Re : combiner un slide toggle avec un scroll

5 jours après je me sens bien seul

Je donne quand même le résultat de mes recherches au cas ou un noob, comme moi, en recherche de solutions passe par là

J'ai légèrement modifier le code et pas à pas j'arrive à peu près a ce que je veut :

    window.addEvent('domready', function() {

    var status = {
        'true': 'open',
        'false': 'close'
    };


    // -- invitation gratuite
    var myverticalSlide5 = new Fx.Slide('invitation', {mode: 'vertical'}).slideOut();

    $('toginvitation').addEvent('click', function(event){
        event.stop();
        myverticalSlide5.toggle();
	var myFx = new Fx.Scroll(window).toElement('invitation', 'y');
    });
});

J'ai laissé la var status car je pense pouvoir m'en servir pour le scroll du genre ouvert je scroll vers l'élément, fermé je fais rien.

Ensuite je crée le slide puis j'appelle le lien qui au clic va ouvrir le slide et faire office de bouton toggle (ouvert/fermé)

puis je rajoute l'effet de scroll vers l'element portant l'ID invitation c.a.d mon slide.

Maintenant je vais essayé de trouver comment l’empêcher de scroll quand on ferme le slide., en creusant du coté du var status. et c'est pas gagné !

Bon je teste ca car il y les conditions mais c'est pas encore ca :

window.addEvent('domready', function() {

$('toginvitation').addEvent('click', function(e)
{
var div = $('invitation');

if (div.getStyle('display') != 'block')
div.setStyle('display', 'block');
else
div.setStyle('display', 'none');
});

});

A suivre ...