-
Total de itens
1327 -
Registro em
-
Última visita
-
Dias vencidos
15
Tudo que Omar~ postou
-
Como fazer para o menu ficar fixo quando rolar para baixo
Omar~ respondeu ao tópico de Sapinn em Javascript
<style> #menu { width: 100vw; height: 50px; background-color: black; position: relative } #menu.sroll { position: fixed; top: 0; left: 0; z-index: 1; background-color: red } </style> <div id="menu"></div> <script> var menu = document.getElementById('menu'); document.addEventListener('scroll', exemplo, false); function exemplo(e) { if (window.pageYOffset > 100) { // scroll acima de 100 pixel's menu.classList.add('sroll'); } else { menu.classList.remove('sroll'); } } </script> Ou você pode simplesmente definir que o menu é fixed no CSS que ele irá acompanhar o scroll do documento.- 2 respostas
-
- javascript
- scroll
-
(e mais 1 )
Tags:
-
Inserir registros em várias Div's (for) getelementsbyclassname e js
Omar~ respondeu ao tópico de daviassumpcao em Javascript
children nada mais é que um array com o(s) filho(s) de algum elemento, então pegamos o texto contido nesse filho e enviamos para a função. Então obtemos o primeiro e o segundo filho Definimos que o valor da variável será o retorno da função clacularPreco enviando o texto contido no filho[0] e no filho[1] em calcularPreco a será o texto contido no filho[0] e b será o texto do filho[1] -
Inserir registros em várias Div's (for) getelementsbyclassname e js
Omar~ respondeu ao tópico de daviassumpcao em Javascript
Não pois isso apenas traz um array com todos elementos cujo possuam o classificador referente. Mas vamos entender uma coisa antes: Você busca por Lhe trará a estrutura HTML contida nesse primeiro item encontrado, mas enquanto a algum segundo ou terceiro elemento? Assim como você mesmo colocou você possui 2 prateleira-preco-de. Então o mais sensato seria buscar o elemento pai e através dele chegar até os filhos. var _prateleira = document.getElementsByClassName('prateleira-wrap'), // Elemento pai _precoDe, _precoPor, _desconto, _precoDesconto; for (var _i = 0; _i < _prateleira.length; _i++) { _precoDe = _prateleira[_i].children[0]; // prateleira-preco-de _precoPor = _prateleira[_i].children[1]; // prateleira-preco-por _desconto = _prateleira[_i].children[2]; // desconto _precoDesconto = calcularPreco(_precoDe.innerText, _precoPor.innerText); if (isNaN(_precoDesconto) == true) { _desconto.innerText = 'Não há desconto no preço do produto'; } else { _desconto.innerText = 'Desconto de ' + _precoDesconto + '%'; } } function calcularPreco(a, b) { var floatA = parseFloat(extrairPreco(a)), floatB = parseFloat(extrairPreco(b)); return (((floatB / floatA) * 100) - 100).toFixed(2); } function extrairPreco(elemento) { return elemento.replace(/[^\d,]+/g, '').replace(',', '.'); } -
Isto é algo bem simples porém, como proceder depende dos dados. E sim terá que usar JSON (para transferir o array do PHP) e javascript (para interação do usuário). O primeiro seletor seleciona um índice do array de retorno do banco, para que os outros dois sejam modificados. Aí que entra as questões: Isso é uma array que vai de 26 a 32 ou é só uma string? Isso é um array ou é só uma string? Veja: var dados = JSON.parse('<?= json_encode($resultado_da_query) ?>'); console.log(dados); Então terás o array executado no PHP disponível no javascript, então basta percorrer esse array no javascript usando um protótipo forEach, comparar o valor do seletor primário com algum índice desse array então criar as opções com a função createElement com os valores que desejar, que por sua vez são inseridas nos outros seletores. Se puder der um var_dump no resultado de sua query e poste o resultado do array para poder te ajudar. Se possível parte do código usado (Não precisa de tudo) Apenas a parte HTML do seletor primário e a linha que executa a query.
- 1 resposta
-
- javascript
- html
-
(e mais 1 )
Tags:
-
Dica complementar: Você pode está buscando por arquivos de folha de estilo que já cuidam desses assuntos corriqueiros de uso banal e simples. Um exemplo está nesse de minha autoria mesmo: https://github.com/Spell-Master/sm-web/blob/master/css/sm-default.css Nada mais que contém tudo que você precisa para arquitetura de todo layout de um documento html. Então para seu caso fica simples: <link href="sm-default.css" rel="stylesheet" type="text/css" /> <div class="container"> <div class="box-x-500 margin-auto align-center"> <div class="box-x-100 line-block bg-red"> Coloque aqui dentro o que desejar </div> <div class="box-x-100 line-block bg-green"> Coloque aqui dentro o que desejar </div> <div class="box-x-100 line-block bg-blue"> Coloque aqui dentro o que desejar </div> </div> </div> container: Se a resolução for de um tela Full-HD as margens estarão contidas para evitar desajustes de layout. box-x-500: Caixa com 500 pixel's de largura aproximados, mas quando a resolução for menor que isso ela se adapta a disponibilidade de tela. margin-auto: Automaticamente obtêm a distâncias laterais com relação ao se eixo de largura, fazendo o elemento se centralizar. align-center: Qualquer filho quando possível será movido para o centro. box-x-100: Caixa com 100 pixel's de largura aproximados. line-block: Faz com que o elemento se torne um bloco alinhado a seu parente mais próximo. Os demais bg-? eu apenas coloquei para exemplo; Lógico que se for para essa finalidade não vale a pena usar, mas como disse esse arquivo possui inúmeros recursos para compor toda estrutura do layout de forma responsiva. Vale a pena obter-lo, ler e testar seus recursos, qualquer outra dúvida sobre ele mande mensagem pessoal.
-
Lógico , que só o primeiro é alvo, justo porque um identificador é único não pode se repetir. Por isso lhe mostrei uma função que irá criar um elemento em loop cada um com um id único. Da mesma forma que mostrei como encontrar esse elemento no DOM. Mas não só pelo #ID que podemos encontrar um elemento no documento, existem várias outras formas, e uma infinidade de abordagens diferentes, não importa se está no DOM pode ser encontrado. Um método seria ao criar o elemento adicionar ao mesmo um classificador que poderá ser usado para localizar ele com mais facilidade. Então um função poderá manipular esse(s) elemento(s). Vejamos isso na prática: Como o que vamos adicionar a cada elemento vem de um array dados, podemos saber seus índices com dados[0], dados[1] etc.. Usando o método para localizar o classificador "elemento_avo" teremos um array da NodeList de todos alvos[0], alvos[1] etc.. Bastando então executar um loop no array dos elementos podemos obter o índice da volta atual do loop através de uma variável que se alto incrementa a cada volta. Mas como nem tudo que reluz é ouro, problemas podem ocorrer se se a quantidade de itens no array dados for menor que o numero de elementos. Para isso basta apenas conferir se exite algo para se manipular antes: /* for (var i = 0; i < alvos.length; i++) { alvos[i].innerText = dados[i]; } */ for (var i = 0; i < alvos.length; i++) { if (typeof dados[i] !== 'undefined' && dados[i] !== null) { // Adicionando esse checagem alvos[i].innerText = dados[i]; } }
-
<div id="colocar_aqui"></div> <button onclick="adicionarInput()">Novo Input</button> <script> var contagemID = 0, maximoInput = 10, // Quantos podem ser adicionados? novoInput, novoButton, dataInput, removeInput, alvo = document.getElementById('colocar_aqui'); function adicionarInput() { contagemID++; if (contagemID <= maximoInput) { // Criar novo input novoInput = document.createElement('input'); novoInput.type = 'text'; novoInput.name = 'descricao[]'; novoInput.id = 'descricao_' + contagemID; alvo.appendChild(novoInput); // Remover input adicionado novoButton = document.createElement('button'); novoButton.innerText = 'Remover'; novoButton.setAttribute('data-input', novoInput.id); novoButton.addEventListener('click', removerInput, false); alvo.appendChild(novoButton); } } function removerInput(e) { dataInput = e.target; removeInput = document.getElementById((dataInput).dataset.input); removeInput.parentNode.removeChild(removeInput); dataInput.parentNode.removeChild(dataInput); } </script> #EDIT: Veja que cada ID vai ser descricao_Numero_de_adição Perceba também o uso do atributo data que você também pode usar para obter o elemento que queira atacar. Pois foi esse o método que usei para saber qual item devo atacar com a função de remover. Além do atributo data você pode usar um classificador e atingir diversos itens de uma só vez. Qual informação será adicionada ao input, e quais os critérios para esse complemento não há como eu saber. Seria de grande ajuda saber se existe algum critério para anexar valor a um elemento, e que valor seria esse.
-
Quando se trata de loop em array pode-se tanto obter a chave do índice da array quanto contar as voltas que o loop faz foreach ($array_de_varredura as $indice => $valor) { $indice++; /* Lembrando que sempre o primeiro índice é zero */ echo ("Índice atual: {$indice}<hr />"); } // Outra questão: $voltas = 0; foreach ($array_de_varredura as $indice => $valor) { $voltas++; echo ("Índice atual: {$indice}<br/>" . "Volta atual: {$voltas}<hr />"); }
-
Mas solucionou? E erro de parâmetro eu cometo também "e muito", acontece geralmente porque sempre porque defino nomes bem mais detalhados na produção, enquanto que na versão final no nome é bem mais genérico para reduzir os KB's do arquivo assim ela carrega mais rápido. No entanto ao depurar esse tipo de erro é logo escancarado no console do browser.
-
Por onde começo?!.... Hun... O caso da lista: Possivelmente o problema está na estrutura HTML (algum erro). Pois independente de tag's usadas a repetição de um loop é executada, se for o caso em cada volta do loop o erro/incoerência é repetido. Como você pode fazer a coisa dar certo: Primeiramente o seu elemento "LIGHTBOX" deve ficar fora do laço do loop no caso seu é o while. O seu lightbox aí contará com toda arquitetura HTML crua ou seja, ele vai ser todo definido o que cada local vai ter porém não vai ter informação alguma. Assim sendo quando você o exibir povoe esses campos usando o javascript para tal finalidade. Vou mostrar um exemplo de como você pode obter esses dados do html já renderizado e adicionar em outro local. (Só vou fazer uma linha, nas demais é só repetir a lógica) Veja: No contexto eu prefiro a minha opção anterior de levar o array do PHP para o javascript. O que dar no mesmo a única diferença é que agora tem que ficar consultando o documento para encontrar o que mostrar. Sua questão é extremamente simples. Nada mais do que manipular o html das 3 maneiras que citei antes com javascript e para tal existem incontáveis maneiras de o fazer, mas no fim será sempre exibir algo em um local específico.
-
O problema em ajudar você, é saber em qual questão de "não funciona" você quer dizer. Como assim não funciona? Enfim, algumas ponderações para se levar em conta: A tag <a> já é um vetor de redirecionamento, use uma tag <button> porque nesse contexto aí quando clicado na tag <a> a confirmação é exibida porém o redirecionamento fica no aguardo, assim que essa confirmação deixar de existir o redirecionamento vem para o mesmo arquivo e a função não se completa. (você pode está removendo o atributo href para evitar isso) Na função confExclusao no segundo parâmetro idLocacao você envia os dados porém ao concatenar você usa algo que não existe dentro da função. Erro encontrado: Correção:
-
Não e sim depende da velocidade de conexão de quem o php vai entregar o HTML renderizado. O que você se refere quando diz: lista? Praticamente nada se usar as informações já disponíveis de sua query. Existem 3 formas de exibir mais detalhes sobre algo em específico. 1 - Ao abrir o modal executar um ajax em algum arquivo que fará a leitura novamente no banco em busca do alvo em questão (As alternativas abaixo são melhores). 2 - Varrer o documento em busca das informações que serão usadas e replicar no modal. (Mais simples) 3 - Levar toda array que veio do banco de dados para o javascript, então usar essas informações para definir o que será mostrado no modal. (como eu prefiro fazer) Segue o exemplo de como realizar a operação 3 Simples usamos a função no php json_encode para transformar o array em uma string, assim essa string pode ser manipulada no javascript. Só que na capsula usamos o JSON.parse que irá transformar a string em array. Na pratica é converter o array do php em um array compatível com javascript. Uma vez que temos todos os dados disponíveis no javascript, bastando clicar no botão chamando um função que irá pegar o índice do click e comparar com o índice do array. No mais é só ir exibindo os dados.
-
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.
-
JavaScript - owlCarousel - Mostrar itens relacionados
Omar~ respondeu ao tópico de violin101 em Javascript
@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: Assim sendo acredito que isso já possa solucionar. Ou seja indicando ao script o que o html possui de elementos. Entretanto me intriga esse objeto, justamente porque não sei como funciona o owlCarousel: 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. -
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.
-
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>
-
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: 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.
-
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() no local onde é redirecionado você faz o registro.
-
Adaptar comando excluir para perguntar antes se deseja deletar
Omar~ respondeu ao tópico de biakelly em PHP
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.- 4 respostas
-
- função excluir
- comando excluir
- (e mais 1 )
-
Defina o name do input como array <input type="hidden" class="id" name="id[]" value="<?=$row['id']?>" />
-
Uma resposta tão vazia quanto a pergunta: <?php $contar = 0; if (!isset($a)) { $contar++; } if (!isset($b)) { $contar++; } if (!isset($c)) { $contar++; } var_dump($contar);
-
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 }
-
Como o @washalbano disse instale o xampp.
-
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.
-
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: 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.