Automatically click when opening site

Question

Automatically click when opening site

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)

2

Yesterday I did this question , and everything went well. What I need is that when I open the site directly on the link www.mysite.com/test it open exactly where the "test" is, I used scrollTop for navigation.

So, I think the ideal is to be done in JS an automatic direct 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>

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 link it directly in the li and go to the < strong> scrollTop that I defined.

What is it like?

html jquery

asked by anonymous 18.09.2014 / 18:39

3 answers

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...
});

18.09.2014 / 18:46

2

You can use the window.location.pathname variable to get the URI PATH and the A[href=...] selector to trigger the click on the correct link.

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

Another detail that I could not help noticing, you've complicated your life by creating a function for each link and still manually defining the PX scroll of each one, I suggest you get the offset().top of each element itself as well :

$('.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 in JSFiddle .

21.09.2014 / 19:01

How to create an Excel macro to delete duplicate rows How to change the www (DocumentRoot) folder to another partition in Apache 2.4 (Ubuntu 14.04)?

score 3 · Accepted Answer

You can use a jQuery selector to define which one you want to click on and just simulate the click on it to take 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();
});

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

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