-
Similar Content
-
By AlexandrePrezzi
Pessoal, estou com um problema em um menu (nav) que possui 2 níveis
Peguei esse código "pronto" porém está com algo que não consigo entender
O link do segundo nível quando clica não redireciona para a página desejada , porém se eu clicar e pedir para abrir em nova guia dai ele funciona..
Vou colocar o código aqui (tentei deixar o mais simples possível, com apenas os itens a serem testados)
Fico no aguardo
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>
-
By Sapinn
Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
Codigo js
window.onscroll = function(){
var top = window.pageXOffset || document.documentElement.scrollTop
var barra = document.querySelector(".barra");
if(top > 900){
barra.style.display = 'flex';
//aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
barra.classList.add('transition');
}else{
barra.style.display = 'none';
}
}
Codigo css
.barra{
width: 100%;
height: 70px;
background-color: #090b13;
display: none;
justify-content: space-between;
position: fixed;
opacity: 0;
}
.transition{
transition: 1s;
opacity: 0.7;
}
codigo HTML
<div class="barra" >
<img src="assets/images/logo-nopad.svg" alt="">
<button class="botao-assinatura-header">Assine Agora</button>
</div>
-
By henriquers
Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
Se aguem poder me dar uma luz agradeço a ajuda.
Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
Abaixo segue meu codigo
HTML
<!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
<?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>
-
By karleonel
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .conteudo{ text-align: justify-all; } .texto{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; text-align: justify; } .titulo{ text-align: center; } </style> </head> <body id="minhaPagina"> <div class="conteudo"> <h1 class="titulo"></h1> <p class="texto"></p> <label for="digite">Digite a palavra:</label> <input name="campo" type="text" size="20" maxlength="6" /><br><br> <button type="button" onclick="VPalindromo('fcampo')" >Validar Palíndromo</button> </div> <script> function VPalindromo(str) { //var str = document.getElementByID("fcampo").value; var er = /[\W]/g var smallStr = str.toLowerCase().replace(er, ""); var x = smallStr.split("").reverse().join(""); if (x == smallStr) { alert("É um palindromo.") } else{ alert("Não é um palindromo.") } } </script> </body> </html> Pessoal,
Eu fiz este código utilizando expressões regulares mas ao tentar validar ele sempre dá reposta como falsa.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .conteudo{ text-align: justify-all; } .texto{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; text-align: justify; } .titulo{ text-align: center; } </style> </head> <body id="minhaPagina"> <div class="conteudo"> <h1 class="titulo"></h1> <p class="texto"></p> <label for="digite">Digite a palavra:</label> <input name="campo" id="fcampo" type="text" size="20" maxlength="6" /><br><br> <button type="button" onclick="VPalindromo()" >Validar Palíndromo</button> </div> <script> function VPalindromo(str) { var er = /[\W]/g var smallStr = str.toLowerCase().replace(er, ""); var x = smallStr.split("").reverse().join(""); if (x == smallStr) return true; return false; } </script> </body> </html>
-
By joagostini
Olá, sou iniciante, e estou fazendo, como exercício, o jogo da velha. 'Desenvolvi' uma rotina de escolha de nível do jogo (serão 3 níveis) que deve aguardar a escolha do usuário para o programa prosseguir. Mas acho que não entendi direito como o javascript funciona, pois o que fiz não funciona e não encontrei uma solução (talvez não saíba como pesquisar corretamente o assunto na web).
O começo do HTML (que é pouco) onde está um select para escolha do nível é este:
<body> <div id="dvmenu"> <button onclick="iniciar()">Iniciar Jogo</button> <p><br></p> <div id="dvQuemComeca"> <label for="nivel">Escolha o nivel:</label> <select id="nivel" onChange='atualiza()'> <option value=0 selected>Escolha um nível</option> <option value=1>Nível 1 - Brincadeira</option> <option value=2>Nivel 2 - Surpresa</option> <option value=3>Nível 3 - Desafio</option> </select> </div> <div id="jogador" class="jogador"></div> <div id="vencedor" class="jogador"></div> </div>
O código JS é este:
//INÍCIO VEM DE LOAD function iniciar() { casela = document.querySelectorAll('div[id^="p"]'); for (let cas of casela) { cas.innerHTML = ''; } for (let i = 0; i < 9; i++){ tab = tab; } console.log(tab); nivel = 0; msg = ''; qtosLancesJog = 0; sorteiaJogador(); //até aqui funcionou direito } //-------------------------------------------------------------------- //ESCOLHA DO NÍVEL DO JOGO function atualiza(){ let selecao = document.querySelector('#nivel'); let opcao = selecao.options[selecao.selectedIndex]; return opcao.value; } //-------------------------------------------------------------------- //SORTEIA QUEM VAI COMEÇAR JOGANDO //função para definir o jogador que inicia o tab function sorteiaJogador() {//funcionou direito let quemComeca = parseInt(Math.floor(Math.random() * 2)); if (quemComeca == 0) { msg = 'Computador'; //setTimeout(lanceCpu, 2000);//dá um intervalo antes do computador realizar o 1 lance lanceCpu(); } else msg = 'Humano';//neste caso a rotina espera que o jogador clique no tabuleiro, qdo roda a função lancetab(pos) lanceHumano(); document.querySelector('#jogador').innerHTML = `<br>O ${msg} começa!`; } //-------------------------------------------------------------------- //ESCOLHA RANDÔMICA, NIVEL = 1, Da POSIÇÃO DO LANCE DA CPU NO tabULEIRO function jogouCpu(){//funcionou direito //nível 1 modo randômico pos = Math.floor(Math.random() * 9); return pos; } //função humana function lanceHumano(){ console.log('Estou na função humana'); do { nivel = atualiza(); console.log(nivel); } while (nivel === 0); console.log(nivel + ' passei direto'); }
O problema está nesse do...while da function lanceHumano(). Segundo entendi, ele prosseguiria apenas quando nivel!== 0, caso contrário, ficaria 'preso' até o momento que o usuário escolhesse uma das opções. Pelo HTML percebesse que setei o select para value=0. Mas ele nem se dá ao trabalho de esperar um miléssimo de segundo, segue em frente com o valor que tiver, no caso 0. O while não tem efeito. Essa minha perspectiva está errada? Se sim, o que fazer? (paradigma funcional, await?) Obrigado.
P.S.. No código tem uns conole.logs que servem watch-dogs para ajudar a entender por onde vão as rotinas.
-
