Aide pour l'installation d'une barre de navigation flottante

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Aide pour l'installation d'une barre de navigation flottante

Message par Gaët'#5 le Lun 2 Jan 2017 - 14:45

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Origine
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, à partir de ce tuto : http://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante j'aimerais afficher cette barre de navigation flottante sur mon site. Hors malgré l'ajout de ces codes, celle ci ne s'affiche pas.

Voici les codes que j'ai modifié :

Code:
    /* sticky nav main */
    #fa_sticky_nav {
      font-size:0; /* hide whitespace */
      text-align:center;
      background:#333;
      border-bottom:1px solid #222 !important;
      height:30px;
      position:fixed;
      right:0;
      z-index:999;
      overflow:hidden;
      transition:top 200ms linear, width 600ms ease-in-out;
    }
   
    #fa_sticky_nav li { display:inline } /* navlist adjustment */
   
   
    /* sticky menu links */
    #fa_sticky_nav a.mainmenu {
      color:#CCC;
      font-size:12px;
      font-weight:bold;
      font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
      background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
      display:inline-block;
      padding:0 10px;
      height:30px;
      line-height:30px;
      transition:200ms;
    }
   
    #fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
      color:#FFF;
      background-position:0 25px;
    }
   
   
    /* sticky nav toggler */
    #fa_sticky_toggle {
      background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
      border:1px solid #222;
      border-right:none;
      display:inline-block;
      height:29px;
      width:30px;
      position:fixed;
      right:0;
      z-index:999;
      transition:top 200ms linear;
    }
   
    #fa_sticky_toggle:hover { background-position:-30px 0 }
   
   
    /* make hidden toolbar similar to toggler */
    #fa_toolbar_hidden {
      border-radius:0 !important;
      border:1px solid #222;
      border-right:0;
      border-top:0;
    }
   
   
    /* post offset fix */
    .post div[style*="-30px;"] {
      top:-60px !important;
    }


Code:
    (function() {
      if (!window.FA) window.FA = {};
      if (FA.Nav) {
        if (window.console && console.warn) console.warn('FA.Nav has already been defined');
        return;
      }
   
      FA.Nav = {
       
        // TARGET NODES POUR CHAQUE VERSION
        // PHPBB2  : ".bodyline > table + table"
        // PHPBB3  : "#page-header .navlinks"
        // PUNBB    : "#pun-navlinks"
        // INVISION : "#submenu"
        targetNode : "#page-header .navlinks",
       
        customNav : '<a href="http://www.pic-trail.com/">Accueil</a><a href="http://www.pic-trail.com/?pid=11">Calendrier</a><a href="http://www.pic-trail.com/h4-trail-du-mois">Trail du mois</a><a href="http://www.pic-trail.com/?pid=12">Trail de l\'année</a><a href="http://www.pic-trail.com/h8-toutes-nos-interviews">Interviews</a><a href="http://www.pic-trail.com/?pid=4">Nos parcours</a><a href="Forum">http://www.pic-trail.com/forum</a>', // custom navlinks
       
        keepDefault : false, // keep the default navlinks
        collapsible : false, // show hide button
       
       
        // offset states
        offsets : {
          tbVisible : {
            bottom : 30,
            top : '30px'
          },
         
          tbHidden : {
            bottom : 0,
            top : '0px'
          },
         
          toggler : '30px'
        },
       
        activeOffset : {}, // active offset for the sticky nav
       
        visible : false, // sticky nav is visible
       
        // check the state of the static nav
        checkState : function() {
          if (!FA.Nav.animating) {
            var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
         
            if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
              FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
              FA.Nav.visible = true;
            } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
              FA.Nav.barSticky.style.top = '-30px';
              FA.Nav.visible = false;
            }
          }
        },
       
        animating : false, // sticky nav is animating
       
        // animate the sticky nav when the toolbar is toggled
        animate : function() {
          if (FA.Nav.visible) {
            FA.Nav.animating = true;
            FA.Nav.barSticky.style.transition = 'none';
         
            $(FA.Nav.barSticky).animate({
              top : FA.Nav.activeOffset.top
            }, function() {
              FA.Nav.barSticky.style.transition = '';
              FA.Nav.animating = false;
              FA.Nav.checkState();
            });
          }
        },
       
        // toggle sticky navigation and remember preference via cookies
        toggle : function() {
          if (FA.Nav.barSticky.style.width == '100%') {
            my_setcookie('fa_sticky_nav', 'hidden');
            FA.Nav.barSticky.style.width = '0%';
          } else {
            my_setcookie('fa_sticky_nav', 'shown');
            FA.Nav.barSticky.style.width = '100%';
          }
          return false;
        }
       
      };
     
      $(function() {
        // set default offsets based on toolbar state
        FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
        if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
       
        // find the static nav
        FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
       
        if (FA.Nav.barStatic) {
          $(function() {
            FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
            if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
            FA.Nav.barSticky.id = 'fa_sticky_nav';
            FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
            FA.Nav.barSticky.style.top = '-30px';
             
            document.body.appendChild(FA.Nav.barSticky); // append the sticky one
             
            // sticky nav toggler
            if (FA.Nav.collapsible) {
              FA.Nav.toggler = document.createElement('A');
              FA.Nav.toggler.id = 'fa_sticky_toggle';
              FA.Nav.toggler.href = '#';
              FA.Nav.toggler.style.top = '-30px';
              FA.Nav.toggler.onclick = FA.Nav.toggle;
             
              document.body.appendChild(FA.Nav.toggler);
            };
           
            window.onscroll = FA.Nav.checkState; // check state on scroll
            FA.Nav.checkState(); // startup check
             
            // animate sticky nav and change offsets when the toolbar is toggled
            $('#fa_hide').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
              FA.Nav.animate();
            });
           
            $('#fa_show').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
              FA.Nav.animate();
            });
          });
        }
      });
    }());

Merci pour votre aide.


Dernière édition par Gaët'#5 le Mer 4 Jan 2017 - 17:16, édité 1 fois
avatar

Gaët'#5
**

Masculin
Messages : 50
Inscrit(e) le : 30/01/2015

https://pic-trail.com/
Gaët'#5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par zz10 le Lun 2 Jan 2017 - 19:16

Je poste pour voir le lien du forum !
avatar

zz10
Membre actif

Masculin
Messages : 2247
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par zz10 le Lun 2 Jan 2017 - 19:22

Bonjour,

La barre de navigation en place sur votre forum est-elle la barre de navigation par défaut de FA ou alors c'est un truc "maison" ?
avatar

zz10
Membre actif

Masculin
Messages : 2247
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par Gaët'#5 le Lun 2 Jan 2017 - 19:52

Bonsoir c'est une barre de navigation "maison" que j'ai codé. Je pense aussi que le problème vient de là.
avatar

Gaët'#5
**

Masculin
Messages : 50
Inscrit(e) le : 30/01/2015

https://pic-trail.com/
Gaët'#5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par zz10 le Lun 2 Jan 2017 - 19:58

C'est sur car le tuto de fa ne concerne que la barre par défaut !
avatar

zz10
Membre actif

Masculin
Messages : 2247
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par Gaët'#5 le Mar 3 Jan 2017 - 20:51

existe t'il un moyen de le faire fonctionner avec ma barre de navigation ?
avatar

Gaët'#5
**

Masculin
Messages : 50
Inscrit(e) le : 30/01/2015

https://pic-trail.com/
Gaët'#5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour l'installation d'une barre de navigation flottante

Message par Gaët'#5 le Mer 4 Jan 2017 - 17:16

C'est bon j'ai réussi à coder une nouvelle barre permettant d'afficher cette fonctionnalité sans utiliser la barre de navigation par défaut.

Ceci est donc résolu.

Merci
avatar

Gaët'#5
**

Masculin
Messages : 50
Inscrit(e) le : 30/01/2015

https://pic-trail.com/
Gaët'#5 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum