Archived

This topic is now archived and is closed to further replies.

  • 0

Scroll Spy shadow error

Question

17 answers to this question

Posted · Report post

I'd recommend opening a new topic, and pasting the link; the code used to create the scrollspy, and paste the edit to the .js into our pastebin.

 

That will make it much easier for us to properly investigate, as 'me too' topics are rarely the same as someone else's. I'm sure you'd prefer to get specific attention.

Share this post


Link to post
Share on other sites

Posted · Report post

Ah that makes sense - would be great if that could be included in a future patch. I just assumed using section header with the Scroll Spy was how the http://demo.pagelines.me/sections/ was put together because I had my own tour section I was building - that page on the pagelines framework demo appears to have the same bug and doesn't properly display or switch the .active css for each node. Tools, however, does work just fine and its because obviously there's no sections other the page/post being used there.

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks. But yes, I got stuck.

This is the code:


<h4 class="scroll-header" title="Início"></h4>

<span style="color: #333333; font-family: verdana,geneva;"><img class="alignright size-full wp-image-260" style="margin-left: 10px; margin-right: 10px;" title="lastpass" src="http://dialogosconsultoria.com/wp-content/uploads/lastpass.gif" alt="" width="150" height="150" />Quantos sites você está cadastrado? 1, 2, 30? E quantas senhas? Uma para todos os sites ou uma para cada site? Se você respondeu apenas uma, provavelmente está correndo um <a href="http://www.gizmodo.com.br/mais-vazamentos-de-senhas-quais-sites-foram-afetados/" target="_blank"><span style="color: #333333;">enorme risco</span></a>. Se um hacker mau intencionado descobrir sua senha, você pode ter toda a sua <a title="Saiba como hackers apagaram a vida digital de um jornalista em apenas uma hora" href="http://www.tecmundo.com.br/seguranca/27993-saiba-como-hackers-apagaram-a-vida-digital-de-um-jornalista-em-apenas-uma-hora.htm" target="_blank"><span style="color: #333333;">vida digital apagada</span></a>. Já pensou se você perder aquela conta de email que possui há mais de 10 anos?</span>

<span style="color: #333333; font-family: verdana,geneva;">Os especialistas de segurança sempre recomendam que você tenha uma senha forte e diferente para cada site. Contudo, gerenciar essa quantidade de senhas pode ser complicado. Para isso existe o LastPass, um serviço de gerenciamento de senhas que permite a sincronização em diferentes navegadores e plataformas. Além de armazenar suas senhas ele também lhe ajuda a criar senhas fortes.</span>

<span style="color: #333333; font-family: verdana,geneva;">A ideia principal deste gerenciador é que você só precisa se lembrar da senha dele e mais nenhuma. Depois de começar a utilizá-lo, ele fará todo o trabalho sujo para você.</span>

<h4 class="scroll-header" title="Para instalar o Last Pass">Para instalar o Last Pass</h4>

<span style="color: #333333; font-family: verdana,geneva;">[pl_raw][pl_tabs][pl_tabtitlesection type="tabs"][pl_tabtitle active="yes" number="1"]Firefox[/pl_tabtitle][pl_tabtitle number="2"]Chrome[/pl_tabtitle][pl_tabtitle number="3"]Safari[/pl_tabtitle][/pl_tabtitlesection][pl_tabcontentsection][pl_tabcontent active="yes" number="1"]Para instalar o LastPass no FireFox siga estes passos:</span>

<ol>

<li><span style="color: #333333; font-family: verdana,geneva;"><a href="https://addons.mozilla.org/pt-BR/firefox/addon/lastpass-password-manager/?src=search" target="_blank"><span style="color: #333333;">Clique aqui</span></a> e vá até a página de extensões do Firefox.<a href="http://dialogosconsultoria.com/wp-content/uploads/lastpass-firefox.png"><span style="color: #333333;"><img class="size-thumbnail wp-image-247 alignright" title="lastpass-firefox" src="http://dialogosconsultoria.com/wp-content/uploads/lastpass-firefox-150x150.png" alt="" width="150" height="150" /></span></a></span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Na página de extensão clique em: "+ Adicionar ao Firefox".</span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Confirme a instalação</span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Pronto já está instalado</span></li>

</ol>

<span style="color: #333333; font-family: verdana,geneva;">[/pl_tabcontent][pl_tabcontent number="2"]</span>

<ol>

<li><span style="color: #333333; font-family: verdana,geneva;"><a href="https://addons.mozilla.org/pt-BR/firefox/addon/lastpass-password-manager/?src=search" target="_blank"><span style="color: #333333;">Clique aqui</span></a> e vá até a página de extensões do Chrome.<a href="http://dialogosconsultoria.com/wp-content/uploads/lastpass-chrome.png"><span style="color: #333333;"><img class="alignright size-thumbnail wp-image-249" title="lastpass-chrome" src="http://dialogosconsultoria.com/wp-content/uploads/lastpass-chrome-150x150.png" alt="" width="150" height="150" /></span></a></span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Na página de extensão clique em: "+ Adicionar ao Chrome".</span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Confirme a instalação</span></li>

<li><span style="color: #333333; font-family: verdana,geneva;">Pronto já está instalado</span></li>

</ol>

<span style="color: #333333; font-family: verdana,geneva;">[/pl_tabcontent][pl_tabcontent number="3"]Para o Safari não existem<a href="http://dialogosconsultoria.com/wp-content/uploads/lastpass-safari.png"><span style="color: #333333;"><img class="alignright size-thumbnail wp-image-250" title="lastpass-safari" src="http://dialogosconsultoria.com/wp-content/uploads/lastpass-safari-150x150.png" alt="" width="150" height="150" /></span></a> muitas explicações nem no próprio site. Contudo é possível utilizar um instalador universal: https://lastpass.com/installer/ [/pl_tabcontent][/pl_tabcontentsection][/pl_tabs][pl_raw]</span>

<h4 class="scroll-header" title="Depois de instalar">Depois de instalar</h4>

<span style="color: #333333; font-family: verdana,geneva;">Depois de instalar o LastPass no seu navegador você irá ser direcionado para o site dele para criar sua conta de usuário. [pl_popover title="Criando uma senha forte" content="Uma senha forte deve conter letras (maísculas e minísculas, número e caractéres.) Para facilitar a memorização você pode utilizar  um exemplo simples: pegar um nome e transformá-lo. Pássaro vira P@2Sa4o. Você também pode acrescentar números, tais como os três últimos da placa do carro ou do seu cpf: P@2Sa4o364. Esta senha é forte o suficiente e dificilmente será quebrada. "]Escolha uma senha nova e de preferência forte.[/pl_popover] É extremamente importante que você se lembre dessa senha; então a guarde em um local seguro ou a memorize.</span>

<span style="color: #333333; font-family: verdana,geneva;">Agora, toda vez que você entrar em um site você verá a opção do LastPass para salvar a senha. Pronto. Agora você só precisará se lembrar de uma senha!</span>

<span style="color: #333333; font-family: verdana,geneva;"><strong><em>Se você gostou do post ou tem alguma dúvida deixe seu comentário.</em></strong></span>

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

Looking at the code for your page, the last "li class" is set to "active" for the section tab as well as the third. I would advise you to go back and check the anchors you've set within the page which activate the scrollspy. The first one works fine, the shadow effect on the nav is activated by the "active" anchor.

If you get stuck paste the code you've set here and we'll take a look :)

Share this post


Link to post
Share on other sites

Posted · Report post

I'm having the same problem.  Last box stays "active" or shadowed no matter where I am, and I also have it linked to banner sections on the page by divs in the banner titles:

<div class="scroll-header page-header" title="Depression">Depression Counseling</div>

Will see about trying gyoery's fix listed above.

Share this post


Link to post
Share on other sites

Posted · Report post

Copied the section to my child theme and commented out line 32 but same problem remains.  Sucks.

Share this post


Link to post
Share on other sites

Posted · Report post

Todd, that reply is about 6 months old, and since it reflects something coming from Twitter Bootstrap, affecting only certain versions of Firefox, I'm not sure there's going to be much we can do on our end.  I'll ask one of our developers to look into this.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

This seems to be an error with twitter bootstrap. If you still wanna use the section but without active-state marking, just copy the section to your childtheme or /plugins/pagelines-sections/ open the scrollspy.js Line 32 and comment out

scrollArea.scrollspy({offset: 180 - mainOffset}); => // scrollArea.scrollspy({offset: 180 - mainOffset});

also, on line 37:

var offTop = jQuery(this.hash).offset().top - 120;

you can play with the -120. For me -30 gave the result I was hoping 4.

Share this post


Link to post
Share on other sites

Posted · Report post

I'm having the same issue - the final scrollspy element is always set to active, therefore in this scenario 'Viewers' is always highlighted as the active scrollspy node. I'm kind of wondering whether my page template setup is causing this...

http://www.integritygis.com/tour/

Share this post


Link to post
Share on other sites

Posted · Report post

Ya this error is present in all versions of FF, on Mac and Windows from what I've just tested.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Can you post a screenshot of the error please, as like Simon I am unable to see what issue at all.

Share this post


Link to post
Share on other sites

Posted · Report post

@Jheflin,

Your issue is that you're targeting sections, the Scroll Spy was intended to be used with HTML on a post/page only. However, this seems to be a common issue with the Scroll Spy, so I will speak to our developers and see if this can be changed, so it works with sections to.

Share this post


Link to post
Share on other sites