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

JaguarJaguar Member
décembre 2017 modifié dans Echanges
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 !

Réponses

  • je-evrardje-evrard Member
    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é
  • je-evrardje-evrard Member
    J'ai mis en place cette vidéo dans les tutoriaux : tutoriels-videos.htm
  • JaguarJaguar Member
    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 ?
  • je-evrardje-evrard Member
    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é
  • JaguarJaguar Member
    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-barre-des-menus-fixe :D

    Mais je suis totalement satisfait de VW t’inquiète pas :)
  • je-evrardje-evrard Member
    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
  • je-evrardje-evrard Member
    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.

    ++
  • JaguarJaguar Member
    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 !
  • je-evrardje-evrard Member
    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.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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 :(

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • je-evrardje-evrard Member
    @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
  • JaguarJaguar Member
    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 !!!!!!! :o
  • je-evrardje-evrard Member
    J'ai légèrement modifié pour que ce soit plus jolie et plus parlant.
  • je-evrardje-evrard Member
    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é
  • JaguarJaguar Member
    Nan mais la... 8.( c'est abusé comme cette communauté est sympa/efficace !

    Merci vraiment beaucoup beaucoup {) {) {)
  • JaguarJaguar Member
    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 ! {)
Connectez-vous ou Inscrivez-vous pour répondre.