PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 21/12/2017 10:00:58

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Bonjour,

Comment fait on pour avoir le bouton "suivant" sur la page de VisualWizard de pluxml  (http://visualwizard.pluxml.org/) et le faite que ça descende à une page suivante... ?

Je bloque totalement !

Dernière modification par Jaguar (24/12/2017 10:47:08)

Hors ligne

#2 21/12/2017 11:17:39

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Bonjour,

J'ai fait une petite vidéo pour illustrer le sujet.

Interactivité bouton et section

Tu peux me dire si c'est plus clair la ?

++

jéjé


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#3 21/12/2017 17:54:16

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

J'ai mis en place cette vidéo dans les tutoriaux : tutoriels-videos.htm


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#4 21/12/2017 21:28:51

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Merci !
C'est exactement ca.

Par la suite le bute c'est de faire un peu dans ce style : https://themify.me/demo/themes/parallax/#services avoir la barre des menus fixe en haut et visuellement, lorsqu'on se trouve sur "contact" il est en surbrillance.. etc...

C'est faisable ?

Hors ligne

#5 21/12/2017 21:39:39

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Hello,

Dans le cadre d'un one page via vw c'est vrai que je n'ai pas ce genre d'options.

howto_js_navbar_sticky

Il est tout a fait faisable de le faire via des id dans le boutons et les section et un peu de js dans le thème.

++

jéjé


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#6 21/12/2017 21:43:15

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

La surbrillance est en option, mais si déjà l'on peut avoir la barre des menus avec les sections, ce serai top.
J'ai déjà un peu chercher, http://pluxopolis.net/article85/une-bar … menus-fixe big_smile

Mais je suis totalement satisfait de VW t’inquiète pas smile

Hors ligne

#7 21/12/2017 21:45:57

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

La barre de menu tu peux la créer avec une section rempli de boutons en ligne. Chaque bouton cible une section. Mais je n'ai pas actuellement de widget navbar (pour le moment héhé). Tu es donc obligé de créer les boutons en drag and drop puis d'associer l'id de la section dans l'url.

Avec un peu de js sur la section de tes boutons via un id tu peux faire un sticky et transformer ta page en onepage


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#8 21/12/2017 21:51:06

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Mais je suis totalement satisfait de VW t’inquiète pas smile

Ca me fait plaisir, n'hésites pas si tu as 5 minutes de laisser un petit commentaire : checkout/produit/visual-wizard

Ca fait toujours plaisir.

++


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#9 21/12/2017 22:27:08

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

je-evrard a écrit :

La barre de menu tu peux la créer avec une section rempli de boutons en ligne. Chaque bouton cible une section. Mais je n'ai pas actuellement de widget navbar (pour le moment héhé). Tu es donc obligé de créer les boutons en drag and drop puis d'associer l'id de la section dans l'url.

Avec un peu de js sur la section de tes boutons via un id tu peux faire un sticky et transformer ta page en onepage

Ah oui pas mal, mais on peu pas la fixer du coup ? Faudrait fixed la section !

Hors ligne

#10 21/12/2017 22:33:43

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Oui c'est ça.

dans ton thème :

[== Indéfini ==]
.sticky {
  position: fixed !important;
  top: 0 !important;
  width: 100%
}

Dans ta section ou il y a les boutons tu mets la classe sticky dans les propiétés avancés. Ca devrait marcher.


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#11 22/12/2017 00:44:04

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 005
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Pour avoir un menu qui va se coller (sticky) en haut de la fenêtre, voir ce fil de discussion :
Et ton menu, il est pas collant ?
Pas besoin de Javasccript pour faire cela, CSS3 suffit.
Voir quelques sites en démo :
http://www.echecs-annonay.fr/
http://kazimentou.fr/

Attention à ceux qui visitent vos sites avec un Mac. Il faut un préfixe proprio  sad

Hors ligne

#12 22/12/2017 07:44:34

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

@Jaguar

Si tu t'en sort pas, je te fais une démo avec ton menu sticky après le scroll, la surbrillance des boutons au scroll et je t'explique. Comme tu veux. C'est bientôt noël non ?

Voici l'exemple : visualwizardonepage

++

jeje


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#13 22/12/2017 09:47:01

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

je-evrard a écrit :

@Jaguar

Si tu t'en sort pas, je te fais une démo avec ton menu sticky après le scroll, la surbrillance des boutons au scroll et je t'explique. Comme tu veux. C'est bientôt noël non ?

Voici l'exemple : visualwizardonepage

++

jeje

C'est exactement çaaa !!!!!!!  yikes

Hors ligne

#14 22/12/2017 10:23:53

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

J'ai légèrement modifié pour que ce soit plus jolie et plus parlant.


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#15 22/12/2017 15:05:18

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 196
Site Web

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Pour la petite explication :

Il faut rajouter dans le theme.css ceci :

[== Indéfini ==]
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .vwi_section {
  padding-top: 60px;
}

.vwi_button.active{
	border-color: red !important;
	border-width:5px;
}

Rajouter un js/common.js dans le footer.php du thème :

[== Indéfini ==]
....
</footer>
		<script src="<?php $plxShow->template(); ?>/js/common.js"></script>

</body>
...

A l'intérieur du javascript mettre le code suivant :

[== Indéfini ==]
(function($) {
	$(document).ready(function(){
		
		var sections = $('.vwi_section')
		  , navbar = $('#section-navbar')
		  , navbar_height = navbar.outerHeight();
		// When the user scrolls the page, execute myFunction 
		window.onscroll = function() {
			checkSticky();
			checkButtonhigltlight();
		};

		// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
		function checkSticky() {
		  if (window.pageYOffset >= 400) {
			 if (navbar.hasClass("sticky")==false){
				navbar.addClass("sticky").hide().fadeIn("slow");
			 }
		  } else {
			   if (navbar.hasClass("sticky")==true){
					navbar.removeClass("sticky").show();
			   }
		  }
		}
		
		function checkButtonhigltlight() {
			var cur_pos = $(window).scrollTop();
		 
			sections.each(function() {
				var top = $(this).offset().top - navbar_height,
					bottom = top + $(this).outerHeight();
			 
				if (cur_pos >= top && cur_pos <= bottom) {
				  navbar.find('a').removeClass('active');
				  sections.removeClass('active');
			 
				  $(this).addClass('active');
				  navbar.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
				}
			});
		}
		
	});

})(this.jQuery);

Maintenant, dans visual wizard :

  1. Création d'une section avec un id : section-navbar

  2. Dans cette section mettre à l'intérieur x widgets boutons

  3. Les boutons à l'intérieur cible les differents id de sections

  4. Création des sections avec un id correspondant aux liens des boutons

Une petite vidéo pour illustrer et on est pas mal  : Visual Wizard one page

Et c'est tout.

On peux aussi évidemment supprimer le menu du header.php qui ne sert plus à rien puisqu'on est dans un onepage d'une page statique d'accueil.

Le résultat toujours ici : visualwizardonepage

Après comme disait très justement @bazooka07 tu n'est pas obligé d'utiliser js pour le sticky (à toi de voir). L'idée étant de montrer aussi la puissance de js en peu de lignes.

Joyeux Noël @Jaguar !

++

jéjé


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#16 23/12/2017 11:02:30

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Nan mais la...  cry c'est abusé comme cette communauté est sympa/efficace !

Merci vraiment beaucoup beaucoup  kiss  kiss  kiss

Hors ligne

#17 24/12/2017 21:05:30

Jaguar
Membre
Inscription : 20/12/2017
Messages : 11

Re : Le bouton suivant qui descend ! (site onepage menu fixe) [Résolu]

Ok j'ai trouvé je pense, en ajoutant "z-index: 1;" dans tes lignes de CSS. Je sais pas si c'est "éthique" mais ça fonctionne !
Par contre j'ai plus la surbrillance, c'est pas du tout grave, je peux m'en passer.

Merci Visual Wizard ! kiss

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés