Internal navigation with JQuery [duplicate]

Navigation
9

I have the following structure in my 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>

Theiframeiswithdisplaynone,becauseIonlywantittoappearwhenthelinkisclicked.ForthisImadeacodeinJQuery:

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

The iframe is displayed when the link is clicked, but the link is not directed to the iframe on the first click, a second click is required for it, ie I need the link in the first click to both show the iframe and navigate to the top of it. How can I do this?

    
asked by anonymous 28.02.2014 / 14:59

4 answers

4

You can use this to animate scroll to iframe 

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

The link points to the outside frame (window). To point to the iframe, use a target : 

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

For target to work, I believe you need name in the iframe: 

<iframe id="header-reserva-iframe" name="header-reserva-iframe" src="http://www.meuiframe.com"></iframe>
    
28.02.2014 / 15:02
0

Try to force the page to go to div like this: 

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

Remember that the jQuery code should only run after the page loads the DOM, which is the tree of document elements. With this you do not have to force the browser to scroll to the element. 

$(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
    });
});
    
28.02.2014 / 16:13
Is there a way to save types not listed in Settings.Default? function $ .Ajax () return value?