Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Função scrollPlacar não funciona nem no firefox e nem no chrome

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Animações com jQuery e atividade Animando o scroll

por Kássio Henrique Souza Silveira
| 267.7k xp | 42 posts
Estudante e Professor de Química

Minha página parou de funcionar completamente depois de inserir a função "scrollPlacar" no código. Testei em mais de um navegador e também tentei usar as ideias de outras respostas aqui do fórum e nada.

Alguém pode me ajudar um erro que passou despercebido ou tem alguma sugestão?

Obg desde já =D

$("#botao_placar").click(mostrarPlacar);

function inserirPlacar() {
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Kássio";
    var numeroPalavras = $("#contador_palavras").text();

    var linha = criarLinha(usuario, numeroPalavras);
    linha.find(".botao_remover").click(removerLinha);

    corpoTabela.prepend(linha);

    $(".placar").slideDown(500);
    scrollPlacar();
}

function criarLinha(usuario, numPalavras) {
    var linha = $("<tr>");

    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(numPalavras);
    var colunaRemover = $("<td>");

    var link = $("<a>").addClass("botao_remover").attr("href", "#");
    var icone = $("<i>").addClass("tiny").addClass("material-icons").text("delete");

    link.append(icone); //Adiciona o <i> dentro do <a>
    colunaRemover.append(link); //Adiciona o <a> dentro do <td>
    linha.append(colunaUsuario); //Adiciona os <td> dentro do <tr>
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

function removerLinha() {
    event.preventDefault();

    var linha = $(this).parent().parent();
    linha.fadeOut(1000);
    setTimeout(function() {
        linha.remove();
    }, 1000);

}

function mostrarPlacar() {
    $(".placar").stop().slideToggle(1000);
} 

function scrollPlacar() {
    var posicaoPlacar = $(".placar").offset();

        $("body, html").animate({
            scrollTop: posicaoPlacar+"px";
        }, 1000);

}
3 respostas
por José Henrique Merlo
| 100.6k xp | 40 posts
Estudante de Engenharia Elétrica

Fala Kássio, de boa? :)

Pelo que pude perceber, o erro provavelmente está no seu var posicaoPlacar. Note que você chamou a função offset() do elemento $(".placar") mas não definiu qual atributo você queria acessar de fato. Experimente dar um console.log(posicaoPlacar) e verá que isso não está retornando o valor desejado.

Nesse caso, o que te interessa mesmo, é o atributo top da função offset(). Portanto, o seu posicaoPlacar deve ser algo do tipo:

var posicaoPlacar = $(".placar").offset().top;

Acredito que isso vai resolver o problema, mas pra qualquer outra dúvida tô aqui!

por Kássio Henrique Souza Silveira
| 267.7k xp | 42 posts
Estudante e Professor de Química

Opa, José. De boa e tu?

Então, eu fiz essa alteração e nada também. Aparentemente não é problema de compatibilidade com as versões dos navegadores também.

Se puder dar uma analisada no código completo, segue o link da pasta no drive: https://drive.google.com/open?id=1napFwEBENTwG4_m5qAw8dh9Wi21N6Fob

E fico grato mais uma vez pela ajuda :)

solução!
por José Henrique Merlo
| 100.6k xp | 40 posts
Estudante de Engenharia Elétrica

Então Kássio, rodei seu código aqui e percebi o erro! Me passou despercebido, mas é dentro da própria função scrollPlacar(). A função animate() do jQuery, aceita que você passe parâmetros no seguinte formato:

$("html,body").animate({
    param1: x,
    param2: y,
    param3: z
});

Como um objeto JSON, separados por vírgula. No seu código, quando você passa o parâmetro scrollTop: posicaoPlacar + "px", você coloca um ponto e vírgula logo após, o que não é correto! Como parâmetro, você poderia ter terminado o animate tanto com uma vírgula ou sem nada. Ou seja, seu código deveria ser:

$("body, html").animate({
            scrollTop: posicaoPlacar+"px"
        }, 1000);

sem o ponto e vírgula após o "px". Já testei aqui e seu código funcionou! Boa prática :)