Soucis avec la barre de navigation flottante au dessus de la toolbar
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Soucis avec la barre de navigation flottante au dessus de la toolbar
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
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
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:
Bonne journée.
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;
}
Bonne journée.
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
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
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
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
Avec plaisir.
Peut-être alors en rajoutant l'id #fa_menulist ? Comme ceci :
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;
}
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
Ca n'a pas changé la donne..
La barre de navigation flottante apparaît en bas avec ces modifs
La barre de navigation flottante apparaît en bas avec ces modifs
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
Re bonjour,
Et bien désolé alors que cela ne fonctionne pas, pouvez-vous peut-être essayer de changer par #pun-navlinks comme ceci:
J'espère que vous trouverez une réponse.
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;
}
J'espère que vous trouverez une réponse.
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
La barre de navigation ce mets en bas avec ces modifications..
Merci de l'aide Don Vito Corleone.
Merci de l'aide Don Vito Corleone.
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
Bonsoir,
Je remonte le sujet, merci.
Je remonte le sujet, merci.
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
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.
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
Invité- Invité
Invité- Invité
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
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 :
Je pense que c'est bon enfin je l'espère bon courage.
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é
Re: Soucis avec la barre de navigation flottante au dessus de la toolbar
Bonsoir,
YESS!! Merci d'avoir persévéré Don Vito Corleone !
Un grand merci pour ton aide
Bonne soirée
YESS!! Merci d'avoir persévéré Don Vito Corleone !
Un grand merci pour ton aide
Bonne soirée
Invité- Invité
Sujets similaires
» Avoir la barre de navigation flottante au dessus de la toolbar
» Problème avec la barre de navigation flottante
» Soucis avec la barre de navigation
» [ModernBB] bug avec la barre de navigation flottante et les règlements
» Barre de navigation flottante avec fonctionnalités étendues
» Problème avec la barre de navigation flottante
» Soucis avec la barre de navigation
» [ModernBB] bug avec la barre de navigation flottante et les règlements
» Barre de navigation flottante avec fonctionnalités étendues
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum