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

  • 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é
  • J'ai mis en place cette vidéo dans les tutoriaux : tutoriels-videos.htm
  • 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 ?
  • 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é
  • 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 :)
  • 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
  • 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.

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

    Merci vraiment beaucoup beaucoup {) {) {)
  • 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.