Jump to content

Omar~

Members
  • Content count

    970
  • Joined

  • Last visited

  • Days Won

    15

Posts posted by Omar~


  1. Tente remover tudo que não for dígito da string primeiro.

    var strings = {
      a: 'R$ 299,00',
      b: '40 years',
      c: '10.00'
    };
        
    function retornarDigito(str) {
      var string = str.replace(/[^\d]+/g, '');
      if (string.length <= 2) { // No caso de "40 years"
        string + '00'; // vai retornar 4000
      }
      return (parseInt(string));
    }
    
    Object.keys(strings).forEach(function (item) {
      var integer = retornarDigito(strings[item]);
      console.log(integer);
    });

    Com certeza existe um forma mais prática para essa operação, só que no momento não estou conseguindo pensar como.


  2. @violin101

    Entendi seu problema e é fácil de resolver.

    Porém desde já: Desconheço completamente o comportamento de owlCarousel

     

    A questão é simples o PHP gera o HTML que por sua vez pode conter uma quantidade de elementos sendo 1,2,3,4,5.... porém no javascript você interpreta apenas 4 desses.

    Basta apenas indicar ao script quantas voltas de loop existem.

    E você já tem solução aí em seu código:

    Agora, violin101 disse:

    $count += 1;

     

    Assim sendo acredito que isso já possa solucionar. Ou seja indicando ao script o que o html possui de elementos.

    7 horas atrás, violin101 disse:

    nav: true,

    items: <?= $count ?>,

    dots: false,

     

    Entretanto me intriga esse objeto, justamente porque não sei como funciona o owlCarousel:

    7 horas atrás, violin101 disse:

    responsive: {

    Se for o que penso... que seja somente algo de renderização de escala não será necessário intervir, porém se tiver algo a mais.

    Você pode está usando o PHP para escrever essa parte do javascript de acordo com o loop.

     

     

    Citar

    NOTA*

    Para que códigos php sejam escrito no javascript, é necessário que o script esteja no mesmo documento onde o código php está sendo gerado.

     


  3. Bastando posicionar um elemento pai não a necessidade de se preocupar com os outros dois.

    <div> <!-- Essa é fixa e não possui height pois sua altura será composta pelos filhos -->
      <div>
        <!-- Filho 1 fica em cima do 2 porque ele está primeiro -->
      </div>
      <div>
        <!-- Filho 2 fica em baixo do 1 -->
      </div>
    </div>

     

    Ah corrija esse seu css aí, tá meio zoneado e com alguns erros....

     

    E se for questão de realocar elementos quando a página sofrer um evento de scroll, só com css não dá tem que usar javascript.


  4. 7 horas atrás, lezão disse:

    Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.

    Duvido muito que tenha pesquisado, pois se tivesse pesquisado teria chegado a 

    https://developer.mozilla.org/

     

    Enfim, depende de conceitos de como e quais características os elementos vão se empregados.

    <style>
        .conter {
            position: relative;
            height: 200px;
            width: 240px /* Depende do tamanho do texto */
        }
        .circulo {
            /* Criando o circulo */
            height: 200px;
            width: 200px;
            border-radius: 50%;
            /* Adicionando a sombra */
            box-shadow: 8px 10px 10px rgba(0,0,0,.8);
            /* Plano de fundo gradiente */
            background-image: linear-gradient(180deg, rgba(255,0,0,0), rgba(255,10,100,1));
            margin-left: 20px /* Depende da lagura do "conter" "(X - Y) / 2 = ?" */
        }
        .texto {
            /* Posicionando o texto */
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            /* Propriedades do texto */
            color: #ffffff;
            font-size: 90px;
            text-shadow: 6px 3px 6px rgba(0,0,0,.8);
        }
    </style>
    
    <div class="conter">
        <div class="circulo"></div>
        <div class="texto">Weeks</div>
    </div>

     


  5. Bom eu nunca mexi com datas para uma aplicação com javascript, pelo fato que a data é definida pelo hardware do usuário, ou seja se ele estiver com a data errada pode trazer diversos problemas se for usado em validação com como informação, é essencial usar algo no servidor.

    Mas pelo que me lembro da época que estudei a respeito isso aqui já deveria apresentar o resultado esperado:

    10 horas atrás, evandrofelipe disse:

    data.setMonth(data.getMonth() + document.getElementById("cparcela").value);

    No entanto o value de um input é sempre STRING então converta para inteiro usando a função parseInt();

     

    O problema que vejo e não entendo a necessidade é de calcular de uma data específica ao invés da data atual.

    Resolvi brincar aqui e consegui usando dois objetos da função date();

    Bastando eu definir uma data inicial em um objeto e definindo o final no outro.

    var dataA = new Date();
    var dataB = new Date();
                
    dataA.setYear(2020); // Definindo o ano de início
    dataA.setMonth(10); // Definindo o mês de início
    
    dataB.setMonth(dataA.getMonth() + 12); // Calculando os meses com relação a data anterior
    
    var resultado = dataB.getDate() + '/' + dataB.getMonth() + '/' + dataB.getFullYear();
    console.log(resultado);

    Mas como disse, se vai usar esse tipo de informação para registro está cometendo um grave erro.


  6. Pegue as informações dele na sessão e registe uai....

    Se ele logou armazene esses dados como e-mail na session, já o caso da hora atual você obtêm com a função date()

    Citar

    <a href="para_onde_vai">

        <img src="" alt="" />

    </a>

    no local onde é redirecionado você faz o registro.


  7. 3 horas atrás, biakelly disse:

    não creio que era tão simples

    Sim é extremamente simples, um mínima noção de manipulação de elementos com javascript já é mais do que necessário.

    Bastando apenas remover o comportamento do formulário e criando supostos botões de manuseio e pronto.

     

    <div id="local_de_confirmar" style="display: none">
        Confirmar e salvar o formulário?
        <button onclick="salvarFormulario()">SIM</button>
        <button onclick="retornaFormulario()">NÃO</button>
    </div>
    
    <form method="POST" id="confirmar_antes">
        <input type="text" name="exemplo" value="João e Maria" />
        <button>Confirmar ?</button>
    </form>
    
    
    <script>
        var confirmar = document.getElementById('confirmar_antes'), // Obtem o local de confirmar
        confirmacao = document.getElementById('local_de_confirmar'); // Obtem o formulário
    
        function removerComportamento(e) {
            e.preventDefault(); // Remove o comportamento padrão de um objeto
            confirmacao.style.display = 'block'; // Mostra o local dos botões de validar
            return (false); // Mesmo removendo o comportamento retorne nada evita requisição de funções
        }
    
        function salvarFormulario() { // Salva o formulário
            confirmar.submit();
        }
        function retornaFormulario() { // Oculta o local dos botões
            confirmacao.style.display = 'none';
        }
    
        confirmar.addEventListener('submit', removerComportamento, false);
    </script>

    Entretanto é mais eficiente criar os elementos de confirmação dinamicamente.


  8. Você precisa de alguma informação que indique qual mais foi checado

    Meio parecido com isso:

    <?php
    $meses_no_banco_de_dados = [
        ['id' => 1, 'nome' => 'janeiro', 'checado' => 0],
        ['id' => 2, 'nome' => 'fevereiro', 'checado' => 1], // Vai aparecer como marcado
        ['id' => 3, 'nome' => 'março', 'checado' => 0],
        ['id' => 4, 'nome' => 'abril', 'checado' => 0],
        ['id' => 5, 'nome' => 'maio', 'checado' => 1], // Vai aparecer como marcado
        ['id' => 6, 'nome' => 'junho', 'checado' => 0],
    ];
    
    foreach ($meses_no_banco_de_dados as $value) {
        ?>
        <input
            type="checkbox"
            name="meses[]"
            value="<?= $value['nome'] ?>"
            <?= ($value['checado'] == '1' ? 'checked=""' : null) ?> />
            <?= $value['nome'] ?>
        <?php
    }

     


  9. Aqui eu tratei justamente de assunto de caracteres unicode:

    https://github.com/Spell-Master/sm-web/blob/master/javascript/AjaxRequest/AjaxRequest.js#L224

    E não há problema algum até agora quanto a uso de emoticons nos métodos de protocolo POST desse script.

     

    A questão mesmo se refina no tratamento pelo lado do servidor.

    No caso do PHP:

    $salvar = mb_convert_encoding(htmlentities($conteudo_com_emoji), 'UTF-8', 'ASCII');

    Não sei enquanto ao ASP pois não uso essa porcaria.


  10. https://chrome.google.com/webstore/detail/mobile-browser-emulator/lbofcampnkjmiomohpbaihdcbjhbfepf?hl=pt-BR (Desnecessário usar o script que mencionei antes é bem mais eficaz)

     

    Ou simplesmente pressione (CTRL + Shift + i) "Também usar o script é bem mais eficaz"

     

    Também mas não necessariamente necessário:

    Spoiler
    
    /* 
        Media accept
        Created on : 19/10/2016, 17:30:28
        Author     : Spell Master (Omar Pautz)
    */
    
    @media (max-width: 1024px) {
    }
    
    @media (max-width: 900px) {
    }
    
    @media (max-width: 768px) {
    }
    
    @media (max-width: 700px) {
    }
    
    @media (max-width: 600px) {
    }
    
    @media (max-width: 530px) {
    }
    
    @media (max-width: 479px) {
    }
    
    @media (max-width: 400px) {
    }
    
    @media (max-width: 320px) {
    }
    
    @media (max-width: 240px) {
    }

     

     

    Completando o chrome só não é o pior browser que existe porque existe o Edge e o IE. E entrando o termo "developer" esses se tornam piores ainda.


  11. Não com PHP e sim com javascript.

    Pois isso se trata da interação usuário X página renderizada.

    <form>
        <div id="mostar_valor"></div>
        <input class="olhar_valor" type="checkbox" name="exemplo" value="algum_valor" />
    </form>
    
    <script>
        function exibirValor(e) {
            var alvo = e.target, mostrar = document.getElementById('mostar_valor');
            if (alvo.checked) {
                mostrar.innerText = alvo.value;
            } else {
                mostrar.innerText = null;
            }
        }
        document.querySelector('.olhar_valor').addEventListener('change', exibirValor, false);
    </script>

     


  12. @Biel. Entendo sua preocupação pois essa já foi a minha.

    Tenha e mente que hoje em dia os browsers só redireciona até 450px aproximados em média (no Windows e MAC), pois essa a tela dos Smartfones de hoje em dia (Quem começou isso foi o browser Opera).

    Veja quando eu comecei a escrever esse CSS: https://github.com/Spell-Master/sm-web/blob/master/css/sm-default.css

    Eu ainda me retia a resoluções inferiores aos primeiros smartfones que no máximo atingiam 250 pixel's (que foi os primórdios da navegação web móvel), sendo que como disse hoje em dia nenhum é menor que 450px... aliás pixel não é a media usada para esse calculo e sim REM então hoje em dia o resolução mínima seria (15.625 REM)

    Apesar que meu CSS padronizado que dar para desenhar 99% de um layout ainda dar suporte a resoluções menores que essa atual, então serão removidas na próxima atualização que eu fazer.

    O que eu quero dizer é que não precisa calibrar x elementos para milhares de resoluções, pois você tem que pensar em que aparelho está sendo visualizado.

    Porque criar algo que se adapte a um usuário que fica modificando a tela do browser é perder tempo e esforço.

     

    Você deve se preocupar com o landscape (panorama) e não com a resolução.

    • Se você estiver numa resolução em média de "30 REM" aproximados quer dizer que você está vendo em um smartfone em modo retrato.
    • Se você estiver numa resolução inferior "64 REM" aproximados quer dizer que você está vendo em um smartfone em modo paisagem ou em um tablet em modo retrato.
    • Se você estiver numa resolução inferior "120 REM" aproximados quer dizer que você está vendo em um tablet em modo paisagem ou em um monitor de 24 polegadas.
    • Se você estiver numa resolução maior ou próximo a "120 REM" quer dizer que você está vendo em  em um monitor FULL-HD.
    • Fora isso você já entrou em 4K.

  13. Eu particularmente acho desnecessário uma ferramenta para tal finalidade.

    Durante o desenvolvimento costumo fazer algo como isso:

    <div id="resolucao" style="position: fixed; bottom: 0; left: 10px; padding: 10px 20px; background: black; color: white;"></div>
    <script>
      var res = document.getElementById('resolucao');
      res.innerText = window.innerWidth;
      window.onresize = function () {
        res.innerText = window.innerWidth;
      };
    </script>

    Assim sendo, bastando arrastar o tamanho da janela do browser que a qualquer momento eu terei as dimensões da resolução.

    Depois da aplicação pronta é só apagar isso e entregar para o cliente.

     

    3 horas atrás, Biel. disse:

    não uso o recurso que tem no firefox, porque é absurdamente lento

    Não mesmo, essa ferramenta do firefox é muito eficaz o problema deve ser seu layout ou mesmo sua aplicação que usa recursos desnecessários e desorientados por isso a lentidão.


  14. Como eu disse:

    - De onde vem a informação da sub-categoria e como isso é obtido?

    Pois bem, independente dessa minha pergunta, qualquer dados deve está presente o javascript para que quando alterar o valor de categoria temos algo para preencher as subcategorias.

    Optei por um JSON com os dados para subcategoria, onde apenas tenho um índice para saber que sub-categoria pertence a cada categoria.

    Usei o PHP, para criar o json, mas a abordagem fica só com o javascript mesmo.

    No mais o exemplo eu escrevi em cada linha o que é feito (espero que seja algo como isso)

    Spoiler
    
    <?php
    $categorias = [
        ['id' => 1, 'nome' => 'Categoria 1'],
        ['id' => 2, 'nome' => 'Categoria 2'],
        ['id' => 3, 'nome' => 'Categoria 3'],
        ['id' => 4, 'nome' => 'Categoria 4']
    ];
    $subcategoria = [
        ['id' => 1, 'relacao' => 1, 'nome' => 'Sub-Categoria 1'],
        ['id' => 2, 'relacao' => 1, 'nome' => 'Sub-Categoria 2'],
        ['id' => 3, 'relacao' => 2, 'nome' => 'Sub-Categoria 3'],
        ['id' => 4, 'relacao' => 2, 'nome' => 'Sub-Categoria 4'],
        ['id' => 5, 'relacao' => 3, 'nome' => 'Sub-Categoria 5'],
        ['id' => 6, 'relacao' => 3, 'nome' => 'Sub-Categoria 6'],
        ['id' => 7, 'relacao' => 4, 'nome' => 'Sub-Categoria 7'],
        ['id' => 8, 'relacao' => 4, 'nome' => 'Sub-Categoria 8'],
        ['id' => 9, 'relacao' => 4, 'nome' => 'Sub-Categoria 9'],
        ['id' => 10, 'relacao' => 4, 'nome' => 'Sub-Categoria 10']
    ];
    $dados = json_encode($subcategoria);
    ?>
    
    <select name="categoria" id="categoria">
        <option value="">Selecione a Categoria...</option>
        <?php
        foreach ($categorias as $value) {
            echo ("<option value=\"{$value['id']}\">{$value['nome']}</option>");
        }
        ?>
    </select>
    
    <select name="subcategoria" id="subcategoria"></select>
    
    <script>
        var valoresEmJson = JSON.parse('<?= $dados ?>'), // Então aqui eu tenho o JSON com todas sub-categorias
            categoria = document.getElementById('categoria'),
            subcategoria = document.getElementById('subcategoria');
    
        function subValor(e) {
            var valor = e.target.value; // Obtenho o valor da "categoria"
            if (valor) { // Vejo se "categoria" tem mesmo algum valor
                removeOpcao(); // Primeiro limpar todas opções inseridas
                valoresEmJson.forEach(function (indice) { // Pecorro o JSON
                    if (indice.relacao == valor) { // Quando a relação dos índices em "subcategoria" for igual ao valor selecionado
                        // Mando criar novas opções em "subcategoria"
                        // Enviando como parâmetro o id e o nome, no índice do JSON
                        criarOpcao(indice.id, indice.nome);
                    }
                });
            }
        }
    
        function removeOpcao() { // Apenas limpa as opções do seletor "subcategoria"
            while (subcategoria.childNodes.length) {
                subcategoria.removeChild(subcategoria.firstChild);
            }
        }
    
        function criarOpcao(id, nome) {
            var novoOption = document.createElement('option'); // Crio a tag <option>
            novoOption.value = id; // Seu valor é o "id" do índice obtido por parâmetro
            novoOption.innerText = nome; // O texto é o nome do índice obtido por parâmetro
            subcategoria.appendChild(novoOption); // Anexo a opção dentro do seletor subcategoria
        }
    
        categoria.addEventListener('change', subValor, false); // Quando o seletor categoria é alterado
    
        if (categoria.selectedIndex) { // Se algum valor no seletor "categoria" estiver como a propriedade "selected"
            var evento = new Event('change'); // Crio o evento "change"
            categoria.dispatchEvent(evento); // Despacho o evento sem mesmo o usuário alterar o seletor
        }
    </script>

     

    Note que a categoria 4 possui 4 sub categorias e as demais somente 2, pois o que interessa é saber a relação, pois é isso de determina a qual categoria um sub pertence.


  15. Deixa eu ver se entendi....

    O seletor "categoria"  tem lá suas opções, mas o seletor "subcategoria" não.

    Ao alterar "categoria" obtemos seu value, então "subcategoria" terá as opções correspondentes ao atributo "data"

    Resumo: "seletor" no valor for 1, as opções  de "subcategoria" só vão existir as que forem data-option="1"

    É isso?

     

    Se for, de onde e como vão ser as opções do segundo seletor?

    Porque essas opções devem ser criadas e injetadas dentro do segundo seletor, mas criar-las com qual informação?


  16.  

    Use uma variável global para identificar o audio em execução.

    Toda vez que um novo audio é tocado pegue a informação da var global e dar pause no que estiver tocando e play na atual.

    Vejamos um exemplo:

    Spoiler
    
    <button class="tocar_audio" data-alvo="exemplo_a">Tocar Audio A</button>
    <button class="tocar_audio" data-alvo="exemplo_b">Tocar Audio B</button>
    
    <audio id="exemplo_a">
        <source src="audio_a.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="exemplo_b">
        <source src="audio_b.mp3" type="audio/mpeg">
    </audio>
    
    <script>
        var variavelGlobal = null;
    
        document.querySelectorAll('.tocar_audio').forEach(function (e) {
            e.addEventListener('click', tocarAudio, false);
        });
    
        function tocarAudio(e) {
            var alvo = (e.target).dataset.alvo;
            if (variavelGlobal) {
                document.getElementById(variavelGlobal).pause();
            }
            document.getElementById(alvo).play();
            variavelGlobal = alvo;
        }
    </script>

     

     

    Fica meio esquisito pois se a pessoa clicar novamente no audio anterior ela vai continuar ouvindo de onde parou pois o HTML5 não tem recurso para parar uma mídia.

    Porém isso é possível fazer criando a tag <audio> dinamicamente, e quando tocar outro áudio é só apagar o html a tag anterior assim você "mata" a execução substituindo por outro.


  17. Acho que saquei a situação.

    Você não possui a lista de bairros e será cadastrado por um usuário ou por você periodicamente.

     

    Primeiramente a tabela de bairros deve receber uma nova coluna também para identificar o estado

    Pois a consulta deve ser estado + cidade + bairro. Pois existem milhares de bairros com nome repetidos em vários estados.

     

    E como puxar o bairro?

    O primeiro seletor vai carregar o estado onde traremos o ID's dos estados.

    SELECT * FROM estados

    Compomos o html com as informações

    <form method="POST">
      <select name="carregar_cidades">
        <option value="">Selecionar Estado...</option>
        <?php foreach($resultado_do_banco as $value) { ?>
            <option value="<?= $value['id_estado'] ?>"><?= $value['estado'] ?></option>
        <?php } ?>
      </select>
    </form>

    Ao alterar o valor de carregar_cidades, pegamos o ID do estado e buscamos as cidades com essa informação:

    SELECT * FROM cidades WHERE id_estado = '{$id_do_estado}'

    Compomos o html do novo seletor com as informações:

    <form method="POST">
      <input type="hidden" name="id_estado" value="<?= $id_do_estado ?>" />
      <select name="carregar_bairros">
        <option value="">Selecionar Cidades...</option>
        <?php foreach($resultado_do_banco as $value) { ?>
            <option value="<?= $value['id_cidade'] ?>"><?= $value['cidade'] ?></option>
        <?php } ?>
      </select>
    </form>

    Ao alterar carregar_bairros vamos buscar os bairros usando a informação do estado e da cidade

    SELECT * FROM bairros WHERE id_cidade = '{$id_da_cidade}' AND id_estado = '{$id_do_estado}'
    -- lebrando que a coluna "id_estado" é a coluna nova que identifica o estado

     

    Bom, a estrutura HTML já deu para perceber como deve ser feita não é?

     

    Uma questão boa de se abordar aqui é:

    Se a pessoa carregar a query de bairros e não retornar nenhum valor é porque não tem bairro algum cadastrado para aquela cidade.

    Então seria interessante definir a estrutura de um input text para que ela possa manualmente escrever seu bairro.

    O mesmo valeria em criar um option no seletor caso haja resultado, mas não o bairro que ela procura.

    Ao selecionar essa opção uma caixa de texto é inserida no html para ela manualmente escrever o bairro.

     


  18. Atá, entendi...

    Bom o que vai fazer é tentativa e erro.

    Vamos usar um divisor pai e vários filhos dentro desse pai.

    O divisor pai fica fixo na parte inferior da tela.

    Mais ou menos assim:

    <div class="pai">
      <div class="filho">1</div>
      <div class="filho">2</div>
      <!-- quantos filhos forem necessários -->
    </div>

    No pai damos as seguintes propriedades de CSS:

    .pai {
      z-index: 1;
      position: fixed;
      width: 100%; 
      bottom: 0;
      left: 0;
      text-align: center
    }

     

    Os filhos é que fazemos a coisa acontecer, use uma calculadora para poder calcular sua largura dividindo 100 pela quantidade de filhos.

    .filho {
      width: 12.5%; /* 12% já basta? */
      display: inline-block; /* Alinhando um ao lado do outro */
      padding: 1rem /* "1rem = 16px" quanto de espaçamento interno ? */
    }

    Por isso tentativa e erro, pois sua largura deve ser o suficiente para abrigar os demais componentes internos ao filho e ainda permiti-los que caibam em uma linha do divisor pai.

     

    Agora a questão:

    Em 21/09/2020 at 10:52, lezão disse:

    no celular gostaria que a div desses quadrados aparecessem  de 3 em 3 itens

    Use o media-query para redefinir a largura de cada filho de acordo com a resolução da tela.

    Nesse caso aqui quando a resolução máxima não ultrapassar 600 pixels digo que a largura do filho passa a ser outra.

    @media (max-width: 600px) {
      .filho {
        width: 6.25rem; /* 6.25rem = 100px */
      }
    }

     


  19. O problema dos bairro é que temos mais de 5k de cidades no território brasileiro. Quantos bairros em cada cidade?

    É facilmente chegamos a um array com mais de 1/2/3/4...... milhão de índices que teria de ser feito na mão, fora o trabalho de consulta individual de cada.

     

    Confesso que faria facilmente isso, mas levaria pelo menos uns 2 meses para catalogar cada bairro em cada cidade e preparar o script para ficar operacional.


  20.  

    1 hora atrás, lezão disse:

    como fazer essas imagens ficar a frente do slideshow

    Que imagens?

     

    1 hora atrás, lezão disse:

    qnd responsivo aparecer de 3 em 3

    Qual resolução?

    Quando que aparece em 3 em 3?

    O que aparece em 3 em 3?

     

    Faltou você apresentar um código, explicar de forma coesa seu problema e se possível uma imagem demostrando o resultado final.

     

    Tente o "z-index" pois isso define a importância  de um elemento no documento.


  21. Olha esse termo de selecionar um estado e já carregar cidades nem precisa de um apelo pelo servidor pode ser feito através somente do javascript.

    Existe esse maravilhoso script para essa finalidade https://github.com/robertocr/cidades-estados-js

     

    Agora o caso do bairro e tal até que daria para fazer um upgrade, mas seria um trabalho minucioso e teria que consultar o senso pra ter uma relação dos bairros de cada cidade. Ou seja daria trabalho pra caramba....

×

Important Information

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