Discussion :

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

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

Toc toc il y a encore quelqu'un ?

[fredericS]

Toujours personne ???

AU cas ou pour ceux qui cherche comme moi en vain....

J'ai pu en modifiant une ligne ouvrir le slide et faire descendre la page au niveau du slide ouvert. Mais le probléme est que si l'on remonte et que l'on reclique sur le lien pour fermer le slide on scroll de nouveau vers lui.

Testé cette fois sur la rubrique nous contacter.

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
window.addEvent('domready', function() {
 
    var status = {
        'true': 'open',
        'false': 'close'
    };
 
 
    // -- nous contacter
    var myverticalSlide4 = new Fx.Slide('nous_contacter', {mode: 'vertical'}).hide();
 
    $('togcontact').addEvent('click', function(event){
        event.stop();
        myverticalSlide4.toggle();
    var myFx4 = new Fx.Scroll(window).toElement('nous_contacter', 'y');
    });
});

du coup j'essaye autre chose sur la rubrique invitation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
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');
});
 
});

cela avait l'air de fonctionner en test sur http://jsfiddle.net/ mais en réel sur mon site c'est pas terrible. Je fouille de ce coté là a cause des conditions qui me semble être le plus apte à rendre ce que je veux.

I need help

[fredericS]

Je me suis trompé dans l'adresse du site http://www.salon-bioharmonies.com

Mais mon problème reste entier, malgré toutes les pages que j'ai pu lire je suis toujours aussi nul en javasript. J'ai essayé plusieurs scripts mais pour le moment aucun ne donne le résultat escompter.

Je pense que je dois utiliser les conditions if et else pour avoir ce que je veux mais j'ai un peu de mal avec la syntaxe exacte ce qui fait que mes essais ne donne rien. En effet j'arrive à ouvrir le slide et a faire scroller la page jusqu'au bon endroit mais si je reclique sur le lien pour fermer le slide je scroll de nouveau jusqu'a sa position et c'est cela que je voudrais évité.

En fait il faudrait que la page scrool si on ouvre le slide et qu'elle ne scroll pas lorsqu'on ferme.

Pour le moment j'ai trois script a l'essai sur le site un sur "Magasins Bio Partenaires" l'autre sur "Nous contacter" et le dernier sur "Invitation gratuite" les voici dans l'odre :

Magasins bio

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
window.addEvent('domready', function(e){
        $('magasins_part').slide('hide');
        $('togmagpart').addEvent('click', function(e){
            e.stop();
            $('magasins_part').slide('toggle');
        });
    });

Nous contacter

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
indow.addEvent('domready', function() {
 
    var status = {
        'true': 'open',
        'false': 'close'
    };
 
 
    // -- nous contacter
    var myverticalSlide4 = new Fx.Slide('nous_contacter', {mode: 'vertical'}).hide();
 
    $('togcontact').addEvent('click', function(event){
        event.stop();
        myverticalSlide4.toggle();
    var myFx4 = new Fx.Scroll(window).toElement('nous_contacter', 'y');
    });
});

Invitations gratuites

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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');
            e.stop();
});
 
});

[fredericS]

Histoire d'animer un peu ce post voici un script que j'ai ecris tout seul et qui forcément ne marche pas Le slide est ouvert au chargement et le lien ramène en haut de la page.

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
    window.addEvent('domready', function() {
 
    var status = true;
	var myverticalSlide2 = new Fx.Slide('comment_venir', {mode: 'vertical'}).hide();
 
	if(status){
    $('togcomvenir').addEvent('click', function(e){
        e.stop();
        myverticalSlide2.slideOut();
	    var myFx = new Fx.Scroll(window).toElement('comment_venir', 'y');
		status=false;
    });
 
	else if(status){
	$('togcomvenir').addEvent('click', function(e){
        e.stop();
        myverticalSlide2.slideIn();
		status=true;
    });
 
});

Si quelqu'un peut me donner une piste ?

[vermine]

Salut,

Sans avoir trop regardé le code, je pense qu'il serait plus simple que toutes les sous-rubriques utilisent la même fonction au clic. Cette fonction aurait pour but d'ouvrir ou bien de fermer celui qui a été cliqué et de fermer tous les autres éléments ouverts (normalement il n'y en a qu'un d'ouvert au même moment si j'ai bien compris). N'ayant qu'un seul élément ouvert au final (ou aucun), il serait donc directement bien positionné.

[fredericS]

Merci Vermine de te pencher un peu sur mon cas.

En fait mon idée première était justement de pouvoir dérouler tout le site (c.a.d ouvrir tous les slides) et d'utiliser les liens pour scrooler la page au bon endroit, mais que si l'on choisit de fermer un slide cela ne fasse que le fermer et l'on a plus de fonction scroll.

le visiteur pourrait ainsi n'ouvrir que les slides dont il a besoin et ensuite d'utiliser les liens pour aller au bon endroit ou la molette de la souris ou son pouce quand il est sur mobile. Comme c'est pour un salon en parc expo cela doit être un peu plus nomade qu'un site classique, le one page supprime les temps de chargement souvent assez long en chaque page lorsqu'on navigue en 3G ou H+ car d'ici qu'on est la 4G partout.

Tu me propose plutôt un truc du style accordion je vais voir ce que je trouve de ce coté là car il est vrai que j'avais écarté cette option dès le départ préférant un slide toggle.