9

Tenho a seguinte estrutura no meu header:

<header>
...

<div id="header-reserva" class="cf">
   <a href="#header-reserva-iframe" class="scroll">Reserve aqui!</a>
</div>

...

<iframe id="header-reserva-iframe" src="http://www.meuiframe.com"></iframe>

</header>

O iframe está com display none, pois só quero que ele apareça quando o link for clicado. Para isso fiz um código em JQuery:

$("#header-reserva a").click(function() 
{
    $("#header-reserva-iframe").css('display', 'inherit');
});

O iframe é apresentado quando o link é clicado, mas o link não é direcionado para o iframe no primeiro clique, sendo necessário um segundo click para isso, ou seja, preciso que o link no primeiro click tanto mostre o iframe quanto navegue para o topo dele. Como posso fazer isso?

0

4 Respostas 4

4

Pode usar isso para animar o scroll até o iframe

$('html, body').animate({
    scrollTop: $("#header-reserva-iframe").offset().top
}, 2000);
1
2

O link aponta para o frame de fora (window). Para apontar para o iframe, use um target:

<a href="#" target="header-reserva-iframe" class="scroll">Reserve aqui!</a>

Para o target funcionar, acredito que você precisa de um name no iframe:

<iframe id="header-reserva-iframe" name="header-reserva-iframe" src="http://www.meuiframe.com"></iframe>
2
  • Tentei mas não obtive resultado. 28/02/2014 às 14:23
  • Tente colocar um name no iframe, igual ao id
    – bfavaretto
    28/02/2014 às 16:25
0

Tente forçar a página a ir pra div assim:

$("#header-reserva a").click(function() 
{
    $("#header-reserva-iframe").css('display', 'inherit');
    window.location.hash = '#header-reserva-iframe';
});
0

Lembre-se que o código jQuery deve rodar só depois que a página terminar de carregar o DOM, que é a árvore de elementos do documento. Com isso você não precisa forçar o navegador a fazer o scroll até o elemento.

$(function(){ // Aguarda o DOM ser carregado
    $("#header-reserva a").click(function() {
        $("#header-reserva-iframe").show(); // Troquei o .css() por .show() só pra ficar mais legível
    });
});

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .