Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

douglascyc

html5 ancoras não funcionam

Recommended Posts

Pessoal

Preciso de ajuda

Estou tomando uma surra

A apresentação de slides possui link para paginas referente ao conteúdo do slide.

Preciso colocar uma ancora de retorno para que os visitantes da pagina do assunto ligado ao slide retorne ao slide que fez o link da pagina para prosseguir a exibição dos outros slides.

Código

<aside id="fh5co-hero" clsas="js-fullheight">

<div class="flexslider js-fullheight">

<ul class="slides">

<li id="conv" style="background-image: url(images/slide_1.jpg);">

<div class="container">

<div class="col-md-12 text-center js-fullheight fh5co-property-brief slider-text">

<div class="fh5co-property-brief-inner">

<div class="fh5co-box">

<h3><a href="#">Convenção Empresarial</a></h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque dicta magni amet atque doloremque velit unde adipisci omnis hic quaerat.</p>

<p><a href="portfolio/convencao-empresarial.html" class="btn btn-primary">Leia mais...</a></p>

</div>

</div>

</div>

</div>

</li>

Os slides estão dentro de <ul><li>

Já tentei com as ancoras HTML chamando elas com # hastag exemplo:

<a href=”índex.html#slide05”><voltar</a>

Usei para identificar o slide de retorno com Id div tag details section name

Nenhuma delas funcionou

Tentei com JS abaixo e também não funcionou

<a id="top"></a>

...

<a href="#top" class="anchorLink">Back to Top</a>

$(document).ready(function(){

$(".anchorLink").click(function(e){

e.preventDefault();

var id = $(this).attr("href");

var offset = $(id).offset();

$("html, body").animate({

scrollTop: offset.top

}, 100);

Agradeço a ajuda

Douglas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Prezado Codercss

Grato por sua atenção

Li sua sugestão no https://developer.mo.../HTML/Element/a

Apliquei sua sugestão mas o problema continua mesmo a página de destino abrindo em uma target blanck

Quando retorno ele sempre vai para o primeiro slide

Ele ignora o endereço do slide que fez o link da pagina

Tentei com todas as formas de identificação Id div tag details section name

Alguma coisa bloqueia a identificação do slide que fez o link e abre o primeiro slide da serie.

Mais uma vez obrigado por sua ajuda.

Vou continuar procurando e se encontrar a solução posto aqui

Douglas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Haa, entendi!

Sendo assim acho que tem haver com cookies. Pois vai ter que guardar no browser, no object session uma variável com um determinado valor, valor esse que corresponde à posição da página que o user estava em determinado momento. Desta maneira, na próxima vez que o user abrir a página o seu site, se assim programado, vai ler essa variável e vai arrastar a página para essa posição.

Acho que isso é feito pelo id da tag. Pois bastará adicionar à url algo como isto "#id_da_tag" e voilá!

Mas como fazer isso automaticamente não sei. Mas penso que seja pelas cookies!

Espero ter ajudado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ainda não funcionou

Veja se estou colocando corretamente

Na página index no slide que chama a pagina externa

Identificação do slide

<a tag="jant"></a>

link para a página externa jantar-tematico como você informou com _ antes de blank

<a href="portfolio/jantar-tematico" target="_blank" class="btn btn-primary"/>

e sem o _ underline anted do blank

<a href="portfolio/jantar-tematico" target="blank" class="btn btn-primary"/>

na pagina externa jantar-tematico o link para retorno ao slide que chamou esta página

tentei as 3 opções abaixo e todas retornam para o primeiro slide

<a href="../index.html#jant"></a>

<a href="../index.html#jant_da_tag"></a>

<a href="../index.html#jant_id_da_tag"></a>

Todas as opções retornam para o index no primeiro slide. Na verdade acredito que volte para o top da pagina index pois aparece o menu e se fosse para o primeiro slide acredito que não apareceria o menu

Mais uma vez obrigado por sua atenção

Douglas

Compartilhar este post


Link para o post
Compartilhar em outros sites

O que eu estou a falar é disto:

<h1 id="twelve">Heading twelve</h1>
    <p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>

Na url coloco:

exercise.htlm#twelve

E a página vai parar directamente à posição daquele elemento, que neste caso é um cabeçalho!

Questão:

Na página para onde o seu cliente é desviado é sua?

Ideia:

Pelo que percebi você está a desenvolver o seu próprio slide show, certo?

Conhece este serviço? https://slides.com/ É bom para fazer esse tipo de trabalhos.

Mas obviamente que te encorajo a desenhar o teu próprio sistema :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ola

Quando você falou dos cookies e colocou

Acho que isso é feito pelo id da tag. Pois bastará adicionar à url algo como isto "#id_da_tag"

Pensei que fosse uma forma de #id que não conhecia

O retorno é sempre o mesmo volta para o primeiro slide da fila mas como aparece o menu e acho que volta para o top da pagina index .html

Isso só acontece dentro do slide <ul><li> apresentação de slide </li> </ul>

Para todos os outros elementos da pagina funciona perfeitamente voltando para o lugar que coloco a ancora e funciona com qualquer tipo de identificação id tag name etc

Isso já fiz colocando o id em todos os lugares abaixo

tentei também substituir o id por name tag <details>

tentei colocar dentro de div e section

<div id="slide3">

<li id="slide3" style="background-image: url(images/slide_1.jpg);">

<div class="container" id="slide3">

ja criei uma <class=return id="slide3">

<div class="col-md-12 text-center js-fullheight fh5co-property-brief slider-text" id="slide3">

<div class="fh5co-property-brief-inner" id="slide3">

<div class="fh5co-box">

<h3><a href="#">Convenção Empresarial<a id="slide3"/></a></h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque dicta magni amet atque doloremque velit unde adipisci omnis hic quaerat.<a id="slide3"/></p>

<p><a href="portfolio/convencao-empresarial.html" class="btn btn-primary" id="slide3" >Leia mais...</a></p>

na pagina que chama o slide de volta

<a href=”índex.html#slide03”><voltar</a>

Mais uma vez muito obrigado por sua ajuda e se encontrar a solução coloco aqui

Douglas

<div class="fh5co-property-brief-inner">

<div class="fh5co-box">

<h3><a href="#">Convenção Empresarial</a></h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque dicta magni amet atque doloremque velit unde adipisci omnis hic quaerat.</p>

<p><a href="portfolio/convencao-empresarial.html" class="btn btn-primary">Leia mais...</a></p>

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Chirlison
      Bom dia a todos!
      Alguém sabe dizer como criar âncoras animadas para páginas externas?
      Ex.:
      Vamos supor que a página index.php tenha o seguinte menu:
       
      Home | Quem Somos | Clientes | Contato                        Missão                          Visão                        Valores

      Vamos supor que a página "Quem somos" tenha as seguintes seções:

      Missão
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...

      Visão
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...

      Valores
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...

      Como fazer para que quando o usuário clicar no item de menu "Quem Somos -> Missão",  o usuário seja redirecionado para a página  "Quem Somos" e a página role suavemente até a seção "Missão"?
      Se o usuário clicar no item de menu "Quem Somos -> Visão",  o usuário seja redirecionado para a página  "Quem Somos" e a página role suavemente até a seção "Visão"?
      Se o usuário clicar no item de menu "Quem Somos -> Valores",  o usuário seja redirecionado para a página  "Quem Somos" e a página role suavemente até a seção "Valores"?

      Por favor, alguém sabe dizer como pode ser feito?
      Desde já, agradeço a todos que puderem colaborar!
    • Por halfar
      onde está o erro nos links abaixo, tentei das formas abaixo, mas nenhuma forma funciona, clico no link e não acontece nada.
       
      echo "<a href='javascript:void(0)' onclick= 'mostra_texto($xid, $tabela);'>" . $titulo[$linha] .  "</a>"; echo "<a href='#'onClick='mostra_texto($xid, $tabela);'>" . $titulo[$linha] .  "</a>"; echo "<a href='javascript:mostra_texto($xid, $tabela);'>" . $titulo[$linha] .  "</a>";  
      coloquei umas mensagens de alert() logo no inicio da função,  não aparece nada, pelo jeito nem está lendo a função.
    • Por Daniel_Heringer
      Eae galera, sou novo no forum e preciso muito de ajuda. Eu estou desenvolvendo um site - plm87.com.br/Davi - esse é o link temporario.
      Então, a duvida é o seguinte: quando eu clico nos links do menu as ancoras funcionam normalmente. porém, quando eu clico nos botões de "ver mais" na parte de especialidades as ancoras desconfiguram.
      Então, preciso de algum método, que seja em js, html, css ou qualquer outra linguagem para recarregar a precisão das ancoras.
      Me ajudem PF eu pesquisei bastante e não achei ninguem com esse mesmo problema.
      Obrigado. :)
    • Por igorcacerez
      Fiz um site Wordpress onde no menu tem alguns links que são ancoras,
      as ancoras funcionam perfeitamente quando a tela do dispositivo for de um pc, agora
      quando for uma tela pequena e usa o menu responsivo as ancoras não funcionam.
      Alguem sabe o por que isso acontece?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.