Auto-click when opening site

Asked

Viewed 3,702 times

2

Yesterday I did that question, and it all worked out. What I need is that when I open the site directly on the www.meusite.com.br link/test it opens exactly where the "test" is, I used scrollTop for navigation.

So I think the ideal is to be done in JS a direct automatic click on my menu. Below is my HTML:

<ul class='menuItensPrincipal'>
    <li class='menuFixoListHome'>
        <div id='home' class='menuFixoListNome'><a href="home">Home</a></div>
        <div class='menuFixoListFechar'></div>
    </li>
    <li class='clear'></li>
    <li class='sobrehotel menuFixoList'><a href="/sobre-o-hotel">Sobre o Hotel</a></li>
    <li class='tarifario menuFixoList'><a href="/tarifarios">Tarif&aacute;rio</a></li>
    <li class='noticias menuFixoList'><a href="/noticias">Not&iacute;cias</a></li>
    <li class='reservas menuFixoList'><a href="/reservas">Reservas</a></li>
    <li class='contato menuFixoList'><a href="/contato">Contato</a></li>
</ul>

The Jquery:

$('#reserva').click(function (e) {
    e.preventDefault();
    setHistory("Reserva", "/reserva");
    $('html, body').stop().animate({
        scrollTop: '4680px'
    }, 700);
});
$('#localizacao').click(function (e) {
    e.preventDefault();
    setHistory("Localização e Contato", "/contato");
    $('html, body').stop().animate({
        scrollTop: '5677px'
    }, 700);
});
$('.sobrehotel, #sobrehotelRodape, #acomodacoes, #estrutura').click(function (e) {
    e.preventDefault();
    setHistory("Sobre o Hotel", "/sobre-o-hotel");
    $('html, body').stop().animate({
        scrollTop: '1000px'
    }, 700);
});
$('.tarifario, #tarifarioRodape').click(function (e) {
    e.preventDefault();
    setHistory("Tarifário", "/tarifario");
    $('html, body').stop().animate({
        scrollTop: '2020px'
    }, 700);
});
$('.noticias, #noticiasRodape, .socialBalao').click(function (e) {
    e.preventDefault();
    setHistory("Notícias", "/noticias");
    $('html, body').stop().animate({
        scrollTop: '3000px'
    }, 700);
});
$('.reservas, #reservasRodape, #btReservaIr, #btReservaIr2').click(function (e) {
    e.preventDefault();
    setHistory("Reserva", "/reserva");
    $('html, body').stop().animate({
        scrollTop: '4670px'
    }, 700);
});
$('.contato, #contatoRodape').click(function (e) {
    e.preventDefault();
    setHistory("Contato", "/contato");
    $('html, body').stop().animate({
        scrollTop: '5678px'
    }, 700);
});
$('#home').click(function (e) {
    e.preventDefault();
    setHistory("Home", "/home");
    $('html, body').stop().animate({
        scrollTop: '0'
    }, 700);
});

So if I open paste in the browser the link http://www.meusite.com.br/teste he right click on li and go to the scrollTop that I defined.

Has as?

3 answers

4


You can use a jQuery selector to define which li you want to click and just simulate the click on it, to get the user to the point.

$("li.classeDaLi").click();

Example:

$(document).ready(function(){
    $('.tarifario, #tarifarioRodape').click(function (e) {
        e.preventDefault();
        setHistory("Tarifário", "/tarifario");
        $('html, body').stop().animate({
            scrollTop: '2020px'
        }, 700);
        $("body").attr("link",".tarifario");
    });

    $('.sobrehotel, #sobrehotelRodape, #acomodacoes, #estrutura').click(function (e) {
        e.preventDefault();
        setHistory("Sobre o Hotel", "/sobre-o-hotel");
        $('html, body').stop().animate({
            scrollTop: '1000px'
        }, 700);

        $("body").attr("link",".sobrehotel"); 
    });


    var link = $("body").attr("link");
    $(link).click();
});

Note that it is now dynamic. You only need one click. When you click on a link it adds an attribute on the body that indicates the page you are on. And when you use the click after all, when you open any one it already goes to the correct place.

This: $("body"). attr("link",".tarifario"); you will have to include in all with the specific class.

  • http://jsfiddle.net/joayryx9/5/, I made it here. Only in this case, the only way it works is that the classes are equal to the link. example: /over-the-hotel, the class of the li has to be over-the-hotel

4

You can use something like:

$(document).ready(function(){ // ao término do carregamento do arquivo
  $('#ELEMENTO QUE VOCÊ QUER').click(); // disparar o click de determinado elemento
  $(this).scrollTop(); // scroll para o topo, pode ser necessário adequar o seletor, ou seja, em vez de $(this), $(window)... ou outro...
});

2

You can use the variable window.location.pathname to get the URI PATH and the selector A[href=...] to fire the right link.

$('.menuFixoList A[href="' + window.location.pathname + '"]').click();

Another detail that I couldn’t help noticing, you complicated your life creating a function for each link and still setting manually the scroll in PX of each, I suggest you take the own offset().top of each element, thus:

$('.menuFixoList A').click(function (e) {
    e.preventDefault();
    var classe = $(this).parent().attr('class').split(' ')[0];
    setHistory($(this).text(), $(this).attr('href'));
    $('html, body').stop().animate({
        scrollTop: $('div.'+classe+'.conteudo').offset().top
    }, 700);
});

See working on Jsfiddle.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.