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.

[vermine]

Ah oui, d'accord. Alors je repartirais de l'exemple des tarifs et je ferais un scroll de ce genre :

Code :

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

1
2
//Définiton globale
var monScroll = new Fx.Scroll('mon_container');

Qu'on appelle à chaque clic après le déroulement de la zone voulue :

Code :

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

monScroll.toElement('ma_cible');

[fredericS]

Salut Vermine,

Voici comment j'ai adapté ce que tu m'a dit sur mon code

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 monScroll = new Fx.Scroll(window);
 
    var myverticalSlide = new Fx.Slide('vertical_slide5', {mode: 'vertical'}).hide();
 
 
    $('v_toggle5').addEvent('click', function(event){
        event.stop();
        myverticalSlide.toggle();
        monScroll.toElement('vertical_slide5');
    });
    myverticalSlide.addEvent('complete', function() {
    monScroll.toElement('vertical_slide5');     
});
    });

Est-ce que cela te semble juste ?

je l'ai placé sur les 5 rubriques mais j'ai toujours le même souci, c.a.d que lorsque je ferme une rubrique je scroll vers sa position malgré qu'elle soit fermé

[vermine]

Bonjour,

Outre le fait qu'on puisse rassembler le code en une seule fonction plutôt que de créer l'objet pour chaque menus, il faudrait essayer de distinguer la fermeture de l'ouverture de l'élément. Et ne faire le scroll sur l'élément que lors de l'ouverture.

Et il est préférable d'utiliser un autre container que window.

[fredericS]

Hé oui tu viens de pointer du doigt mon problème de noob

J'ai essayé de donner une valeur booléen et d'utiliser if et esle mais mon niveau de javascript et vraiment au ras des paquerettes, voici ce que j'ai essayé de faire en utilisant Mootools Docs et un certains nombre de script glané sur le net :

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

Je pensais avoir tout bon mais ca marche pô

Edit : en fait ce code je l'avais posté plus haut mais cela ne fonctionnait pas, mais a force de creuser j'ai trouvé deux erreurs d’accolade qui une fois corrigées permettent au code de fonctionner mais pas vraiment comme je l'aurai souhaité. Si tu veux voir l'effet j'ai mis le code sur l'invitation, sinon en bref au chargement de la page le slide est bien fermé, au clic il s'ouvre et l'on scrool jusqu'a lui (donc jusque la tout va bien) mais au deuxième clic au lieu de fermer le slide je scroll de nouveau vers le slide qui reste définitivement ouvert.

[vermine]

Je ne sais plus s'il existe une propriété disant si l'élément est ouvert ou bien fermé. Ça aurait simplifié le code. En attendant, il faut remplacer else if(status){ par else {.
Sinon tu ne passes jamais dans le else.

Ta variable status (qui ressemble à un mot clef du langage d'ailleurs) doit être propre à un seul menu. Ce serait bien de trouver une autre manière de faire (j'en reviens à la propriété évoquée plus haut).

[fredericS]

J'ai fait les essais que tu m'a conseillé mais cela ne change rien, le script fonctionne de la même manière. Pour le changement du mot "status" c'est normal, pour le "else" sans "if(status)" je pensais qu'on etait bon mais non, cela aura moins eu le mérite d'améliorer le script.

Pour ce qui est de distinguer l'ouverture et fermeture d'un élément j'ai trouvé ca sur le site mootools : http://mootools.net/docs/more/Fx/Fx.Accordion

Events

active

(function) Function to execute when an element starts to show.

Signature

Code :

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

onActive(toggler, element)

Arguments

toggler - (element) The toggler for the Element being displayed.
element - (element) The Element being displayed.

background

(function) Function to execute when an element starts to hide.
Signature

Code :

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

onBackground(toggler, element)

Arguments

toggler - (element) The toggler for the Element being displayed.
element - (element) The Element being displayed.

Returns

(object) A new Fx.Accordion instance.

Examples

Code :

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

1
2
3
var myAccordion = new Fx.Accordion($$('.togglers'), $$('.elements'), {
    display: 2,
    alwaysHide: true

});

Je vais voir comment je peux m'en servir mais là j'ai pas de base et l'impro en javascript ca marche pas comme l'html

je vais faire des recherches ce soir et je posterais un code demain, si d'ici là tu as une idée de la manière d’intégrer ceci au code je suis open

[fredericS]

Sinon je mettais inspiré de ce script http://jsfiddle.net/fredericS/3QnW2/ (j'espère que le lien va marcher) car je ne sais plus sur quel site j'ai trouver cette démo. je l'ai enregistré sur jsfiddle pour pouvoir travailler dessus.

Il y a une fonction qui permet d'afficher le status du slide en fonction de son etat : ouvert ou fermé.

Code :

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

1
2
3
myVerticalSlide1.addEvent('complete', function() {
        $('vertical_status1').set('text', status[myVerticalSlide1.open]);
    });

j'ai pas vraiment compris comment ca marche j'ai donc eu du mal en m'en servir pour ce que je veux faire.

[fredericS]

AU cas ou j'ai aussi vu de ce coté là :

Fx.Scroll Method: toElementEdge

Scrolls the element until the specified element is visible along the specified axes.

Syntax

myFx.toElementEdge(el[, axes]);
Arguments

el - (mixed) A string of the Element's id or an Element reference to scroll to.
axes - (array or string, optional) An array or string specifying which axes to scroll on, can be 'x', 'y', or ['x', 'y']. It defaults to both axes.
Returns

(object) This Fx.Scroll instance.
Examples

//Scrolls the window until "myElement" is visible, scrolling in whatever direction
//is required.
var myFx = new Fx.Scroll(window).toElementEdge('myElement');

//Same as above but only scrolls the window up or down.
var myFx = new Fx.Scroll(window).toElementEdge('myElement', 'y');

Mais bon j'ai du écrire 25 script depuis ce matin mais cela ne donne rien.

Au cas ou si tu veux voir ce que cela produit je l'ai integrer dans un nouveau test : http://jsfiddle.net/fredericS/8V5Gd/

mais en gros au clic in scrool bien sauf que il se cale sur le bas de la page c.a.d qu'il met le haut du slide en bas au ras de l'ecran, on ne le voit donc pas. Et puis au deuxième clic (celui pour fermer) cela scroll encore
Bon je vais aller me taper la tête contre un mur et je revient

[fredericS]

Bon ben j'ai jeté l'éponge. Plus de srcoll et de slide , je suis parti sur l'accordion mais je l'ai transformé à ma sauce.

Voici le code qui m'a servi de base :

HTML :

Code html :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div id="infos_pratiques">
 
   <div id="infos-principal">
 
       <span class="prem_ligne">
    <div class="titres_rubriques">Horaires et Tarifs</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/horaires_et_tarifs.png" alt="horloge" width="80" height="80" /></h2>
       </span>
 
       <span class="prem_ligne">
    <div class="titres_rubriques">Comment venir ?</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/comment_venir.png" alt="map maker" width="80" height="80" /></h2>
       </span>
 
       <span class="prem_ligne">
    <div class="titres_rubriques">Magasins Partenaires</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/magasins_bio_partenaires.png" alt="coeur" width="80" height="80" /></h2>
       </span>
 
    </div>
 
	 <div id="infos-secondair">
 
       <span class="deuxiem_ligne">
    <div class="titres_rubriques">Nous contacter</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/nous_contacter.png" alt="dialogue" width="80" height="80" /></h2>
       </span>
 
       <span class="deuxiem_ligne">
    <div class="titres_rubriques">Invitation gratuite</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/invitation_gratuite.png" alt="invitation" width="80" height="80" /></h2>
       </span>
 
	</div>
 
  <div class="content">
    <p>Le salon est ouvert de 10h30 à 19h30 sauf le dimanche femeture à 18h00</p>
    <p>Voici les tarifs d'entrées au salon Bio&Harmonies 2014</p>
  </div>
 
 
 
  <div class="content">
    <p>Comment venir ?</p>
	<p>Pour venir au salon Bio&Harmonies 2014 veuillez suivre les instructions...
  </div>
 
 
 
  <div class="content">
    <p>Voici la liste des magasins partenaires du salon Bio&Harmonies 2014 </p>
  </div>
 
  <div class="content">
    <p>Voici comment nous contacter</p>
    <p>remplissez le formulaire ci-dessous</p>
  </div>
 
 
 
  <div class="content">
    <p>Pour recevoir votre invitation il suffit de nous envoyer une demande par mail à </p>
  </div>
 
  </div>

CSS :

Code css :

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
22
23
24
25
26
27
28
29
30
31
32
 
#infos-principal, #infos-secondair {
    max-width: 100%;
    text-align: center;
}
.prem_ligne, .deuxiem_ligne {
    display: inline-block;
    padding: 5%;
    font: bold 13px Helvetica, Arial, sans-serif;
    color: #999999;
  }
 
.titres_rubriques {
    max-width: 120px;
}
 
  #infos_pratiques H2 {
    display : inline-block;
    color: black;
    cursor: pointer;
    font: 16px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
  }
  #infos_pratiques .content {
    background-color: #F4F5F5;
  }
  #infos_pratiques .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
  }

Le script :

Code :

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

1
2
3
4
5
6
7
window.addEvent('domready', function(){
  new Fx.Accordion($('infos_pratiques'), '#infos_pratiques h2', '#infos_pratiques .content', {
    display: 2,
    show: true,
      alwaysHide: true,
});
});

Et ce que cela donne sur JSfiddle :

http://jsfiddle.net/fredericS/vjkTh/embedded/result/

Il manque un encore un peu de mise en forme mais l'essentiel est là. C'est bientôt mis en place sur le site www.salon-bioharmonies.com.

[vermine]

Arf désolé, je n'ai plus eu l'occasion de me pencher là-dessus. Je suis sûr qu'il y a moyen d'adapter le code d'origine. Mais l'accordéon, c'est bien aussi.

Si votre discussion est résolue, n'oubliez pas de cliquer sur le bouton "Résolu" en bas de la discussion.

[fredericS]

Moi aussi j'imagine que cela doit être faisable car ici je n'ai pas vraiment l'effet escompté mais c'est une alternative intéressante.

Je n'ai pas passé le post en résolu car il ne me semblait pas vraiment résolu, le problème existe encore et j'aimerai bien comprendre ce qui coince. De plus je bosse encore sur le site et sur cet aspect slide, scroll etc.. je peux donc y revenir si je trouve autre chose....