Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
Omar~

Como exibir elemento de acordo com disponibilidade de tela?

Perguntado por Omar~

Pergunta

Omar~    87

Omar~
Postado

É o seguinte: Num projeto aqui venho a receber vários entradas do banco de dados. Normalmente usaria <table> para exibir esses resultados.

Mas nessa em questão decidir exibir cada resultado referente em linhas, e no design responsivo apenas exibir uma linha de cada resultado e criar um botão para abrir uma caixa com os dados em questão.

Vamos a simulação que fiz como deve funcionar o negócio:

Spoiler 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-3.2.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.defalt-line-block-title').click(function () {
                    $('.defalt-line-block').parent().siblings().find('.list-arrow-box').hide('slow');
                    $(this).next('.list-arrow-box').stop(true, false, true).fadeToggle('slow');
                    return false;
                });
                $('.list-arrow-box').click(function () {
                    $(this).hide('slow');
                    return false;
                });
            });
        </script>
        <style>
            * {
                margin: 0; padding: 0
            }
            .defalt-line-block {
                text-align: left;
                border: 1px solid #e5e5e5;
                width: 100%;
                background-color: #f8f8f8;
                display: inline-table;
            }
            .defalt-line-block button {
                cursor: pointer;
                font-size: 1.2em;
                padding: 8px 15px;
            }
            .defalt-line-block-title {
                border: 1px solid #e5e5e5;
                background-color: #7db1e0;
                padding: 0.3em;
                margin-right: 0.5em;
                color: #fafafa;
                display: inline-table;
            }
            .arrow-box {
                z-index: 1;
                position: absolute;
                background-color: #fafafa;
                padding: 4px;
                border: 1px solid #e5e5e5;
                box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.2);
                border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px
            }
            .list-arrow-box {
                display: none;
                width: 100%;
                bottom: 100%;
                cursor: pointer;
                font-size: 0.9em;
                padding: 10px
            }
            .default-input-text {
                padding: 5px 0;
                width: 100%;
                background-color: #f8f8f8;
                border: 2px solid #c4d5e8;
                text-align: center;
                font-size: 1.1em;
                color: #7f7f7f;
                border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px
            }
            .user-logins-responsive { display: block; position: relative }
        </style>
    </head>
    <body>
        <?php
          $foreach_de_resultados = "";
                $foreach_de_resultados . "<div class=\"defalt-line-block\">";
                    $foreach_de_resultados .= "<div class=\"user-logins-responsive\">";
                        $foreach_de_resultados .= "<div class=\"defalt-line-block\">";
                            $foreach_de_resultados .= "<button class=\"defalt-line-block-title\">ABRIR BLOCO</button>Lorem ipsum dolor sit amet";
                            $foreach_de_resultados .= "<div class=\"arrow-box list-arrow-box\">";
                                $foreach_de_resultados .= "<p class=\"left-text gray\"><small>Lorem ipsum dolor sit amet</small></p>";
                                $foreach_de_resultados .= "<div class=\"default-input-text\">Lorem ipsum dolor sit amet</div>";
                                $foreach_de_resultados .= "<p class=\"left-text gray\"><small>Lorem ipsum dolor sit amet</small></p>";
                                $foreach_de_resultados .= "<div class=\"default-input-text\">Lorem ipsum dolor sit amet</div>";
                                $foreach_de_resultados .= "<p class=\"left-text gray\"><small>Lorem ipsum dolor sit amet</small></p>";
                                $foreach_de_resultados .= "<div class=\"default-input-text\">Lorem ipsum dolor sit amet</div>";
                                $foreach_de_resultados .= "<p class=\"left-text gray\"><small>Lorem ipsum dolor sit amet</small></p>";
                                $foreach_de_resultados .= "<div class=\"default-input-text\">Lorem ipsum dolor sit amet</div>";
                            $foreach_de_resultados .= "</div>";
                        $foreach_de_resultados .= "</div>";
                    $foreach_de_resultados .= "</div>";
                $foreach_de_resultados .= "</div>";

        $repeticao = str_repeat($foreach_de_resultados, 10);

        print_r($repeticao);
        ?>

    </body>
</html>

 

 

Nessa simulação temos 10 linhas geradas, digamos que seja o resultado de um loop gerado a partir de dados obtidos. Em cada linha tem um botão para exibir todo contudo daquela tabela do banco em vigor.

Muito bem vamos a dúvida:

Como eu faço para manipular o bloco de exibição de resultados que abre para cima (essa direção deve ser a padrão) de forma que se não houver espaço em tela para cima, o bloco seja seja exibido para baixo?

Que é possível fazer é, um exemplo é o próprio fórum aqui que usa isso ao se levar o mouse em cima de um tópico na lista um bloco aparece com os dados do post, mas se não houver espaço em tela para uma direção o mesmo bloco é reposicionado. Em outras palavras o que quero fazer é a mesma coisa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

0 respostas a esta questão

Recommended Posts

Até agora não há respostas para essa pergunta

Ir para lista de Perguntas Perguntas e respostas rápidas

  • Conteúdo Similar

    • marcelocardoso
      click com slidetoggle e ANCORA no TOP do id
      Por marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • vinicius.david
      [Resolvido] Como adicionar uma classe caso um input não for preenchido em jquery
      Por vinicius.david
      Gostaria de saber como adicionar a classe se um input de uma função de preenchimento automático estiver vazio? Existe uma função que autocomplete o endereço ao colocar o código postal. Se, por exemplo, o endereço_1 está vazio, addClass form-control senão sem-bordas.
      Eu tentei assim: 
      $('#input-address-1').on('change',function(){ if($(this).val() == ''){ $(this).next().removeClass("form-control"); }else{ $(this).next().addClass("sem-bordas"); } Mas sem sucesso
    • Rengavitp
      Problema ao ordenar linhas de uma tabela usando sorteable do jquery
      Por Rengavitp
      Boa noite pessoal,
       
      Estou com a seguinte dificuldade, preciso habilitar o arrastar e soltar de uma tabela, as paginas em que preencho a tabela com java a função funciona normal, mas onde preencho a tabela com jquey nao consigo habilitar essa funcao de arrastar e soltar, alguém pode me ajudar? abaixo segue o modal que contem a tabela.
       
      <!--Janela para listar pedidos--> <div class="modal fade" id="visualizaPedidos" role="dialog"> <div class="modal-sm center-block margin-top-30"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Lista de Pedidos</h4> </div> <div class="panel-body"> <table id="tabela_ordens" class="table tab table-striped"> <!--aqui preencho com jquery--> </table> </div> <script type="text/javascript"> $('tbody').sortable(); </script> <br> <div class="modal-footer center-block"> <button type="button" class="btn btn-primary" onclick="geraOrdemEntrega()">Entrega</button><button type="button" class="btn btn-primary" onclick="geraOrdemCarga()">Carga</button> </div> </div> </div> </div> <!--encerra modal-->  e abaixo o servlet que preenche a tabela
       
      try { //recebe parametros Carga carga = new Carga(); carga.setCd_status_carga(Integer.parseInt(request.getParameter("status"))); carga.setCd_uf_carga(Integer.parseInt(request.getParameter("estado"))); List<Carga> pedidos = new CargaDao().listaPedidosPorStatusEUf(carga); if (pedidos.size() > 0) { out.print( "<thead>" + "<th>Pedido</th>" + "<th>Unidade</th>" + "</thead>" ); out.print("<tbody>"); for (Carga dado : pedidos) { out.print( "<tr>" + "<td>" + dado.getPedido() + "</td>" + "<td>" + dado.getUn() + "</td>" + "</tr>" ); } out.print("</tbody>"); } else { out.print("vaziu"); } } catch (NumberFormatException e) { out.print("erro"); System.err.println("errrrrrou"); }  
    • kenio Junio
      Função ON do Jquery não exclui elementos no DOM
      Por kenio Junio
      Estou desenvolvendo um sistema com PHP e AJAX adiciono em uma tabela uma linha ate ai tudo normal, mas depois que adicionei a linha na tabela quero apagar. 
      estou usando o on(), mas parece não esta funcionando. 
       
      JAVASCRIPT
      $('.extList').on('click', function(){ var idPordEx = $(this).attr('id'); $(".addStatus").html('<span class="add"><i class="fa fa-spinner fa-spin fa-3x fa-fw" style=""></i> Excluindo... <span></span></span>'); $.ajax({ type: "POST", url: "sys/excluirPreco.php", data: 'id='+idPordEx+'', success: function( data ) { var dadosOb = JSON.parse(data); var segundos = 7; if (dadosOb.excluiu == 'sim') { $(".addStatus").html('<span class="checkVeri"><i class="fa fa-check-circle" aria-hidden="true"></i> Excluido com sucesso! </span>'); setTimeout(function(){ $('.checkVeri').hide(); }, segundos*1000); $('#consu_'+dadosOb.idList).remove(); }else if(dadosOb.excluiu == 'sim' || dadosOb.erro == 'sim'){ $(".addStatus").html('<span class="FailVeri"><i class="fa fa-times-circle" aria-hidden="true"></i> Erro ao excluir! </span>'); setTimeout(function(){ $('.FailVeri').hide(); }, segundos*1000); } }, error: function(){ } }); }); PHP
      <?php include_once "../../../config.php"; include_once "../../../classes/BD.class.php"; if (isset($_POST['id'])) { $id = $_POST['id']; $DeletProd = BD::conn()->prepare("DELETE FROM `preco_estado` WHERE id = ?"); if($DeletProd->execute(array($id))){ die(json_encode(array('excluiu' => 'sim','idList' => $id))); }else{ die(json_encode(array('excluiu' => 'nao'))); } }else{ die(json_encode(array('erro' => 'sim'))); } ?> E O HTML 
      <tr id="consu_<?php echo $finalization->id; ?>"> <td><?php echo $finalization->id; ?></td> <td><?php echo $finalization->estado; ?></td> <td><span class="badge bg-light-blue">R$ <?php echo number_format($finalization->preco,2,',','.'); ?></span></td> <td><div class="extList" id="<?php echo $finalization->id;?>"><i class="fa fa-times lixo" aria-hidden="true"></i></a></td> </tr>  
    • Wualace Chaves
      Acessar via Jquey controle criado com ajax em um edititemtemplate
      Por Wualace Chaves
      Estou utilizando o código abaixo para acessar uma imagem com jquery:

      window.addEventListener('DOMContentLoaded', function (e) {
          var minhaimagem = document.querySelector('#id_da_minha_imagem');
          minhaimagem.addEventListener('click', function (e) {
             alert('Voce clicou na imagem');
          }, false);
      }, false);
       
      O código acima funciona perfeitamente quando a imagem está fora de um Gridview.
      Minha dúvida é: Como faço para acessar uma imagem que está dentro de um Gridview em um EditItemTemplate??
      Pelo que pesquisei na net o código acima não funciona porque o elemento ainda não existe no momento do document.ready.
       
      Não tenho experiência com jquery. Existe um jeito de contornar esta situação??

      Desde já agradeço!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito