Jump to content
Omar~

Detectar disponibilidade de tela

Recommended Posts

Olá.... então digamos que eu tenha a seguinte situação:

<div>Exemplo</div>
<div style="position:relative">
  <div style="position:absolute; height:500px; display:none">Caixa</div>
</div>
-----------------------------------------

Então temos uma caxa com 500 pixels de altura e não visível. Alí onde eu coloquei um monte de traço seria um hipótese que fosse o fim da tela ou fim da rolagem de tela atual.

Então pelo javascript eu mudo o atributo display da caixa absoluta para "block", a caixa irá aparecer.

 

Como eu detectaria que não há mais espaço abaixo para exibir-la, mudando seu bottom para top, para que quando não houvesse espaço a baixo para exibir ao invés de mostrar abaixo ela fosse mostrada acima?

 

Motivo:

Eu criei esse seguinte script

https://github.com/Spell-Master/sm-web/tree/master/scripts/SelectOption

Que por sua vez personaliza o combobox de um select.

Spoiler

<select class="select-options">
    <option value="a">Selecione uma opção</option>
    <option value="b">Opção</option>
    <option value="c">Opção</option>
    <option value="d">Opção</option>
    <option value="e">Opção</option>
</select>

<script>
  var select = new SelectOption();
</script>

 

 

 

Mas me veio uma questão e se a pessoa quiser colocar o select logo no final do body? A lista personalizada será mostrada fora da tela.

Lógico ele pode manipular o CSS para correção, mas seria mais interessante se o próprio script pudesse automatizar isso.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Erick Plant
      Olá! Precisando de uma ajudinha.
       
      FICAREI MUITO GRATO PELA AJUDA...SE PUDEREM ME DAR UMA LUZ!
       
      Estou arrumando um código que foi de outra pessoa, mas antes disso, preciso "apagar o incêndio" aqui e fazer funcionar uma implementação.
       
      Tenho um dropzone que carrega um arquivo sem necessidade de form. O problema começa por agora. Foi-me pedido para que eu implementasse um select trazendo do banco uma info e que enviasse via get 'junto com a url que envia as informaçoes do arquivo'.
      O carregador do select foi feito, eu estou pegando o value do select dinamicamente, pois não tem form.
      Porém, o problema é q nao sei como pegar esse value capturado para implentá-lo  na url via get.
       
       
      o js  e o dropzone na pag é esse:
      //AQUI EU PEGO O VALOR DO SELECT DE FORMA DINÂMICA id = ''; $(document).ready(function () { $("#seguimento").change(function () { id = $('#seguimento').val(); }); }); Dropzone.autoDiscover = false; Dropzone.options.tstDz = { //////////////////////////////////////////////////////// //AQUI O DROPZONE QUE PASSA OS PARAMETROS VIA GET /////////////////////////////////////////////////////// url: "<?= base_url('homeCgmrr/MonitoramentoPadraoDesempenho/addDoc?ambiente='.$ambiente.'&value='); ?>", paramName: "arquivo", maxFilesize: 2, acceptedFiles: ".xlsx,.ods,.xls,.csv", addRemoveLinks: true, // init: function () { // this.on("complete", function (file) { // setGallery(file); // }) // } init: function () { this.on('error', function(file, response) { $.notify("Você não pode fazer upload de arquivos com essa extensão, apenas arquivos .xlsx !", 'warning'); }); this.on('success', function(file, resp){ if(resp['status'] == false){ $.notify("Ocorreu erro no preenchimento da planilha. Por favor, verifique e tente novamente.", 'warning'); setGalleryError(file); }else{ setGallery(file); $.notify("Arquivo enviado com Sucesso!", 'success'); } }); } };  
      Como eu posso fazer pra carregar o id SE o base_url está em PHP?
      url: "<?= base_url('homeCgmrr/MonitoramentoPadraoDesempenho/addDoc?ambiente='.$ambiente.'&value='AQUI VAI O ID); ?>",  
      Obrigado pela ajuda!
       
    • By Elisame Araújo
      Bom dia,
       
      Estou montando um site de clã de jogos online (especificamente de Battlefield), e neste momento estou desenvolvendo o painel de administração do site, mas me deparei com uma dúvida que não consigo encontrar uma situação na internet que se aplique ao que eu preciso.
       
      A situação é a seguinte:
       
      Eu tenho um módulo onde o administrador vai adicionar um mapa, um tamanho de jogo e um modo para a rotação do servidor do clã, a exemplo desse pop-up:
       
      A lista de mapas vem do BD.
       
      O que eu preciso é que o segundo e o terceiro <select> sejam preenchidos baseados na seleção do primeiro. Onde, a exemplo:

       
      Seleção de Mapa: Ilhas Lofoten
      Opções Disponíveis a partir do 1º Select: 16 e 32 Jogadores
      Opções Disponíveis a partir do 1º e 2º Select: Dominação, TDM, etc.
       
      Para ficar mais simplificado: Seleção 1 > Opções A Partir de Seleção 1 > Opções A partir de Seleção 1 e 2
       
      Infelizmente eu ainda não tenho conhecimento em JavaScript ou JQuery ou JSON - ainda estou para aprender -, e não consigo encontrar uma resposta simplificada para isso
       
      Como eu poderia fazer isso da maneira mais simples ou didática?
       
    • By lezão
      Ola Galera.
      Boa tarde!
      Td bem com vcs?
      Tenho um codigo de script ele roda perfeitamente, mas ele possui um detalhezinho, o resultado é apresentado dentro de um input text.
      teria como algum me  ajudar em cima deste codigo a tirar o resultado do input e apresentar fora do input?
      <input type="checkbox" name="sabor" id="evento_value1" value="28.00"> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="text" size="5" id="evento_value" onclick="AddValor()" disabled="disabled"/> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(':checkbox').click(function() { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); }); </script>  
    • By Sapinn
      Pessoal como faço para somar horas e minutos no javascritp pegando os dados em um campo de texto??? Eu tenho o codigo mas ele não funciona 

       
      <input type="text" value="2020-11-10 15:20" id="valor-tempo" > <input type="text" value="2020-11-10 01:20" id="adicionar-tempo" > <script type="text/javascript"> let input_hora = document.getElementById('valor-tempo').value; let data = new Date(input_hora) let a = `${data.getHours()}:${data.getMinutes()}` let input_hora2 = document.getElementById('adicionar-tempo').value; let data2 = new Date(input_hora2) let b = `${data2.getHours()}:${data2.getMinutes()}`             var adicionar = document.getElementById("adicionar-tempo").value;         var pega_tempo = document.getElementById("valor-tempo").value;             function somaHora(a, b, zerarHora) {          if(a.length != 5 || b.length != 5) return "00:00";     temp = 0;     nova_h = 0;     novo_m = 0;           hora1 = a.substr(0, 2) * 1;     hora2 = b.substr(0, 2) * 1;     minu1 = a.substr(3, 2) * 1;     minu2 = b.substr(3, 2) * 1;         temp = minu1 + minu2;     while(temp > 59) {             nova_h++;             temp = temp - 60;     }     novo_m = temp.toString().length == 2 ? temp : ("0" + temp);       temp = hora1 + hora2 + nova_h;     while(temp > 23 && zerarHora) {             temp = temp - 24;     }     nova_h = temp.toString().length == 2 ? temp : ("0" + temp);       return nova_h + ":" + novo_m; } novaHora = somaHora(a,b, false); console.log(novaHora);             </script>  
    • By Hydroper
      Estou criando abstrações que funcionam tanto no Browser Environment (via Webpack) quanto no Node.js para auxiliar no desenvolvimento de aplicativos. O TypeScript e JSDoc só não são usados por causa do Proxy e enums, e como consequência os pacotes tem suporte incompleto da IDE.
       
      Gostaria de ouvir a opinião de vocês. Faz sentido o que estou fazendo?
      com.recoyxgroup.localization Essa é uma alternativa mais legível à pacotes populares como i18next no NPM, com mais facilidades embutidas (embora seja simples ainda). com.recoyxgroup.datatransaction (transação de dados) O que esse pacote (ainda não implementado) basicamente faz é a declaração de estruturas de transações associadas à um banco de dados, suportando manipulação dos dados Lembrando que funciona tanto no Browser Environment (cliente) quanto no Node.js (servidor) O pacote do servidor deve suportar uma CLI para performar migrações automáticas no banco de dados (que nem a plataforma low-code GeneXus faz) Deve suportar transações de transações (nível) Deve suportar integridade referencial quando dados forem removidos da tabela física de uma transação Deve ter alguma maneira do cliente performar queries nas transações Eu fiz uma abstração do Knex esses meses, porém ela não é tão boa quanto os itens nessa lista. Além do mais, quero manter apenas Number e BigInt como os tipos numéricos. Repo Plataformas (software/game/site): ainda não pensei como seria um bootstrap.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.