Soucis avec la barre de navigation flottante au dessus de la toolbar

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

Résolu Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Sam 17 Oct 2015 - 15:10

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumessai.superforum.fr/

Description du problème

Bonjour,

J'ai dernièrement pu mettre la barre de navigation flottante au dessus de la toolbar grâce à la réponse à mon sujet par SeLfde4Th7 ( Merci pour cette réponse précédente) que j'ai clôturé trop rapidement..

En effet je m'aperçois d'un soucis, le voici en image:





Ci-joint le java:

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: "#pun-navlinks",

                customNav: '', // custom navlinks

                keepDefault: true, // keep the default navlinks
                collapsible: true, // show hide button


                // offset states
                offsets: {
                    tbVisible: {
                        bottom: 30,
                        top: '0px'
                    },

                    tbHidden: {
                        bottom: 0,
                        top: '0px'
                    },

                    toggler: '0px'
                },

                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 != '-36px') {
                            if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-60px';
                            FA.Nav.barSticky.style.top = '-36px';
                            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();
                        });
                    });
                }
            });
        }());

Et CSS:

Code:
/*=====================================Barre navigation flottante==================================*/

/* sticky nav main */
#fa_sticky_nav {  font-size:0; /* hide whitespace */ text-align:center; background:#CFCBCB;
 border-bottom: 0px solid #CCC !important; height:30px;  position:fixed; right:0; z-index: 999;
 overflow:hidden; transition:top 200ms linear,width 600ms ease-in-out; border-radius: 0 0 50px 50px; box-shadow: 0 0 5px #000000;    }
#fa_sticky_nav li {  display: inline } /* navlist adjustment */

/* sticky menu links */
#fa_sticky_nav a.mainmenu { text-decoration: none;  color: #024FC2 ; font-size:14px; /*===couleur ecriture barre ====*/
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; box-shadow: 0px 1.5px 0px #DEE3E7; list-style: outside none none;  margin: auto;
 padding: 7px 20px; position: relative;  text-align: center; width: auto; z-index: 2; height: 16px;line-height:30px;
 transition:200ms; }
a.mainmenu[href="/search"] {  display: none  }

#fa_sticky_nav a.mainmenu:hover,#fa_sticky_nav a.mainmenu.fa_navactif {text-decoration: none;  color: #2dc42d !important;
  font-size:16px; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;background-position:0 25px;    }

/* sticky nav toggler */
#fa_sticky_toggle {  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
border:1px solid #CCC;  border-right:none;  display:inline-block; height:29px; width:30px; position:fixed; right:61px ; 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 #CCC; border-right:0; border-top: 0; }

/* post offset fix */
.post div[style*="-30px ;"] {  top:-60px !important;  }
#fa_toolbar {  top:0px; z-index:1 !important;  }
#fa_sticky_nav { z-index:999;}
#fa_toolbar_hidden { left:auto !important;  right:30 !important; }

a#fa_notifications {  margin-right: 50px ; }
a#fa_service {  margin-left: 0px ; }
a#fa_icon { margin-left: 65px ; }

Savez-vous ce que je peux modifier pour éviter les problèmes présentés en images au dessus?

Merci à vous, cordialement.



Dernière édition par To-DMEvo le Ven 23 Oct 2015 - 21:23, édité 2 fois

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par Invité le Sam 17 Oct 2015 - 16:14

Bonjour,

J'ai trouvé éventuellement une solution voire la solution avec un peu de chance,en exploitant la propriété z-index comme commencé par vous-même d'ailleurs on peut y voir que la position doit-être relative et qu'il faut empiler les éléments.
Peut-être ceci:
Code:
#fa_toolbar {
Z-INDEX: 1 !important;
}
#fa_sticky_nav, #rotator1437962500433 {
Z-INDEX: 0 !important;
position: relative !important;
}
On croise les doigts Humour

Bonne journée.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Sam 17 Oct 2015 - 16:24

Bonjour Don Vito Corleone,

Après test, la barre flottante arrive en bas du forum.

Ce probléme n'existe plus:


Mais celui ci existe encore:


Merci d'avoir proposé une piste Very Happy

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par Invité le Sam 17 Oct 2015 - 16:32

Avec plaisir.
Peut-être alors en rajoutant l'id #fa_menulist ? Comme ceci :
Code:
#fa_toolbar, #fa_menulist {
Z-INDEX: 1 !important;
}
#fa_sticky_nav, #rotator1437962500433 {
Z-INDEX: 0 !important;
position: relative !important;
}
Pas forcément........ Mais peut-être Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Sam 17 Oct 2015 - 16:37

Ca n'a pas changé la donne..
La barre de navigation flottante apparaît en bas avec ces modifs scratch

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par Invité le Sam 17 Oct 2015 - 20:21

Re bonjour,

Et bien désolé alors que cela ne fonctionne pas, pouvez-vous peut-être essayer de changer par #pun-navlinks comme ceci:
Code:
#fa_toolbar {
Z-INDEX: 1 !important;
}
#pun-navlinks, #rotator1437962500433 {
Z-INDEX: 0 !important;
position: relative !important;
}
Ce ne sont que des éventualités malheureusement mais autant essayer tant qu'à faire.
J'espère que vous trouverez une réponse.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Sam 17 Oct 2015 - 20:28

La barre de navigation ce mets en bas avec ces modifications..

Merci de l'aide Don Vito Corleone.

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Lun 19 Oct 2015 - 21:53

Bonsoir,

Je remonte le sujet, merci.

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Mer 21 Oct 2015 - 20:03

Bonsoir,

J'ai réussi à résoudre le 1er probléme :



En mette "#fa_toolbar { top:0px; z-index:5 au lieu de 1 !important; }"

Par contre je n'arrive pas à résoudre le second problème:



Quelqu'un aurait une solution s'il vous plaît ?
Probléme visible sur http://forumessai.superforum.fr/ en enlevant la barre de navigation flottante et remontant au max..

Merci à vous, cordialement.



Dernière édition par To-DMEvo le Jeu 22 Oct 2015 - 20:44, édité 4 fois

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Jeu 22 Oct 2015 - 20:41

Up du soir

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par Invité le Jeu 22 Oct 2015 - 22:40

Bonsoir

Je me permet de revenir,on le fait sur les liens "a" dans l'id rotator vu que l’élément est positionné en absolute , voici :
Code:
#rotator1437962500433 a {
    z-index: 0 !important;
}

Je pense que c'est bon enfin je l'espère bon courage.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec la barre de navigation flottante au dessus de la toolbar

Message par @To le Ven 23 Oct 2015 - 21:22

Bonsoir,

YESS!! Merci d'avoir persévéré Don Vito Corleone ! Very Happy

Un grand merci pour ton aide Wink

Bonne soirée

@To
*****

Masculin
Messages : 925
Inscrit(e) le : 26/02/2015

@To 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