HTML: o fim da página [Resolvido]

Frank K Hosaka · Abril 18

HTML é uma linguagem que eu não domino, apesar de mexer com o PHP desde 2020.

Hoje estou estudando o Livewire, mas tem uma rotina que eu chamei de previsão e queria dar um jeito de olhar o final da página. A maneira mais simples é a barra de rolagem no canto direito do navegador, mas o mouse está a vários quilômetros do destino e o pior é ter que fazer todo o caminho de volta. Assim, pensei em criar um atalho.

Eu improvisei o seguinte código em PHP, não sei se vai funcionar lá no Livewire:

<?php 
    $mysqli = new mysqli("localhost", "root", "", "diario");
    $produtos = $mysqli->query("SELECT * FROM tbprod LIMIT 30");
?>
<script src="https://cdn.tailwindcss.com"></script>
<body class="min-h-screen flex flex-col justify-end">
    <main class="flex flex-col gap-2">
        <?php foreach($produtos as $index => $p): ?>
            <div class="px-2"><?=$p['prod']?></div>
            <?php if($index==10): ?>
                <a class="px-2 font-bold" href=#fimDaPagina>Ir para o final</a>
            <?php endif;
            endforeach; ?>
    </main>
    <div id="fimDaPagina"></div>
</body>

Esse é um péssimo exemplo de programação, o comando Ir para o final ficou bem no meio da listagem de produtos, o correto era colocar na barra de navegação, mas o meu conhecimento em HTML é precário, não sei como fixar a barra de navegação no topo da tela.

A maneira mais fácil de chegar no fim de uma página é usando atalho de teclado.

A maioria dos PCs usa CTRL + END. O meu é um notebook Galaxy Book S com Windows 11, usei Fn + flecha para baixo.

Editado Abril 18 por Frank K Hosaka

Frank K Hosaka · Abril 19

Melhor que o atalho de teclado é o JavaScript. Hoje eu conheci o comando scrollIntoView( ), ele mostra o final da página, mas quando o <input> recebe o foco, o final da página some. Mas pelo menos o <input> fica sempre disponível no rodapé do navegador, principalmente quando a listagem é bem longa:

arquivo lprevisao.blade.php (parcial)
foreach($mercado as $m)
        <div class="flex odd:bg-gray-200 w-[350px]">
            <div class="w-[100px] text-right">{{ dec($m->venda) }}</div>
            <div class="w-[100px] text-right">{{ dec($m->tarifa) }}</div>
            <div wire:click="excluir({{$m->id}})"
                class="w-[100px] text-right text-gray-500 font-semibold">
                {{ dec($m->conta) }}
            </div>
        </div>
    @endforeach
    <div class=flex>
        <input id=venda wire:model="venda" class="w-[100px] text-right border border-gray-300 rounded-sm" autofocus>
        <input wire:model="tarifa" wire:change="incluir" onchange="venda.focus();ttarifa.scrollIntoView()"
            class="w-[100px] text-right border border-gray-300 rounded-sm">
    </div>
    <div wire:click="registrar" class="flex odd:bg-gray-200 w-[350px] font-semibold">
        <div class="w-[100px] text-right text-gray-500 font-semibold">
            {{ dec($total->tvenda) }}
        </div>
        <div id=ttarifa class="w-[100px] text-right font-semibold">{{ dec($total->ttarifa) }}</div>
        <div class="w-[100px] text-right font-semibold">{{ dec($total->tconta) }}</div>
    </div>

Entrar

HTML: o fim da página [Resolvido]

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades