Navbar sticky com erro

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Navbar sticky com erro

Mensagem por IsmaelS. em 18.11.15 19:55

Relembrando a primeira mensagem :

Detalhes da questão


Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá!

Estava a seguir este tutorial:
- http://help.forumotion.com/t143777-make-your-navbar-sticky

E usei a .CSS:
Código:
/* Menu POP */
#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !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 }
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') 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 {
  background-position:0 25px;
}
#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:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
.post div[style*="-30px;"] {
  top:-60px !important;
}

jS.:
Código:
(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 BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // 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) {
      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
    
      // toolbar modifications
      $(function() {
        // 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();
        });
      });
    }
  });
}());

Só que apenas aparece sempre assim:
Navbar sticky com erro - Página 2 2lk2q02

Ou seja não aparece o menu mesmo que clique não aparece o menu de navegação, solução?


Última edição por IsmaelS. em 26.11.15 16:43, editado 1 vez(es)
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por MateusAnjosV em 25.11.15 21:27

No útimo CSS, procure por:
Código:
color: #00A4CD;
Substitua o #00A4CD pela cor desejada, ok?(Em HTML, inglês ou RGB) Exemplo:
Código:
color: rgba(0, 164, 205, 0.48)

Feliz
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2323

http://holder.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por IsmaelS. em 25.11.15 21:37

Mas eu não quero mudar a cor amigo apenas quero colocar o ícone normal sem estar a negrito amigo.
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por MateusAnjosV em 25.11.15 22:08

Veja, vou lhe provar uma coisa ok?

Olhe essas prints: http://prntscr.com/96ylmz / http://prntscr.com/96ym4c
Elas retratam o que eu quero dizer, note que, o font-weight: normal !important está declarado, ou seja, ele não está em negrito!
A cor do backgrond que usei foi: #39C, a anterior(#0474bf) é a cor do seu menu.


MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2323

http://holder.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por IsmaelS. em 25.11.15 22:42

@MateusAnjosV mas é estranho porque neste fórum:
http://help.forumotion.com/forum

Pode ver a diferença... E coloquei a cor e aparece como fosse a negrito
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por MateusAnjosV em 26.11.15 2:14

Bom dia!

Erro encontrado, isso deve resultar:
Código:
.semnome:before {    content: "\f0c1";
    font-family: fontawesome;
    color: #39C;
    font-size: 14px;
    text-rendering: auto;
    font-weight: normal !important;
    font-style: normal !important;
}
.semnome2:before {
    content: "\f005";
    font-family: fontawesome;
    color: #39C;
    font-size: 14px;
    text-rendering: auto;
    font-weight: normal !important;
    font-style: normal !important;
}

#mateus, #mateus2 {padding: 0 10px;position: fixed; z-index: 999999; top: 0px; left: 100px; color: black !important; font-size: 15px !important; display: block; background-position: 35px 40px; max-width: 20px !important;}  #mateus:hover, #mateus2:hover{background: url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 35px 27px !important; padding: 0 10px;transition: 200ms;height: 30px}
#mateus {margin-left: -50px}
#mateus2 {margin-left: -75px}

MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2323

http://holder.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por IsmaelS. em 26.11.15 4:06

@MateusAnjosV o efeito ao passar o mouse e aparecer aquela barrinha por baixo dá para diminuir nos dois ícones? Só se der senão deixe estar.

E tem este problema ao fechar a barra eles ficam ali e o favoritos deixou de funcionar:
Navbar sticky com erro - Página 2 30horie
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por MateusAnjosV em 26.11.15 8:59

Bom dia!

Troque o js por esse:
Código:
(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 BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // 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) {
      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
   
      // toolbar modifications
      $(function() {
        // 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();
        });
      });
    }
  });
}());

function eutomateus(){
         
    if ($.browser.mozilla == true) {
        window.sidebar.addPanel(title, url, '');
      return false;
   
    } else if($.browser.msie == true) { 
        window.external.AddFavorite( url, title);
        return false;
   
    } else {
        alert('Pressione as teclas CTRL + D para adicionar aos favoritos.');
    }
 };

function mateus(){prompt('Copy the BBCode URL of this page ?','[url='+window.location.href+']'+document.title+'[/url]')};

$(document).ready(function(){
 var url = window.location; var title = "Master Publicitário";
 
 $('#fa_sticky_nav li:first-of-type').after('<div id="mateus" style="color: black !important;font-size: 15px !important;position: fixed;z-index: 999999;top:0px;float: left;left: 50px" onclick="mateus();"><li>BBCODE</li></div><div id="mateus2" style="color: black !important;font-size: 15px !important;position: fixed;z-index: 999999;top:0px;left: 100px"><li><a href="#" onclick="eutomateus();">FAVORITO</a></li></div>'); 
 
 $('#mateus, #mateus2').hide();
 setInterval(function(){
 
 if($(document).scrollTop() >= 219){
  $('#mateus, #mateus2').show();
 } else {
  $('#mateus, #mateus2').hide();
 }
 
 }, 255);
$('#mateus li').html('').addClass('semnome');
$('#mateus2 li').html('').addClass('semnome2');
$('#mateus2').click(eutomateus);
});

Isso deve corrigir o botão "favoritos", verifique.
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2323

http://holder.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por IsmaelS. em 26.11.15 13:55

@MateusAnjosV agora só tem este problema veja, ao fechar a barra:
Navbar sticky com erro - Página 2 30horie
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por Shek em 26.11.15 14:49

@IsmaelS. escreveu:@MateusAnjosV mas é estranho porque neste fórum:
http://help.forumotion.com/forum

Pode ver a diferença... E coloquei a cor e aparece como fosse a negrito
Este não é um "fórum qualquer", e sim um fórum oficial Ismael. Existem alguns elementos no seu fórum que são "parcialmente", uma cópia dele quanto do Fdf PT. Tanto ele quanto qualquer fórum oficial de ajuda não deve ser copiado, ou OnlineGuardian pode intervir com avisos e expulsões do fórum. Oops


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
Shek

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18439
Pontos Ativos : 22248

https://shiftactive.blogspot.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por IsmaelS. em 26.11.15 16:31

Apenas queria essa função mas se acha que é "plágio" de ter esses ícones como eles têm e a função, não seja por isso, dúvida resolvida e obrigado @MateusAnjosV!
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Navbar sticky com erro

Mensagem por MateusAnjosV em 26.11.15 19:37

Navbar sticky com erro - Página 2 Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1694
Pontos Ativos : 2323

http://holder.forumeiros.com/

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum