Como exibir elemento de acordo com disponibilidade de tela?
É 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.Discussão (0)
Carregando comentários...