Jump to content

Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Calendars

  • Comunidade iMasters

Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 2217 results

  1. JenneferBarbosa

    [Resolvido] Validação de datas

    <label>Data Inicio</label> <input type="date" name="data_inicio-incluir" id="data_inicio-incluir"> <label>Data Fim</label> <input type="date" name="data_fim-incluir" id="data_fim-incluir"> Boa tarde pessoal, estou iniciando em JS e não sei como fazer a validação de datas. Estou fazendo um sistema de aluguel de livros, então, como consigo verificar se a data_fim não é menor que a data inicio e que a data_fim seja de 1 até 7 dias depois da data_inicio, não podendo ultrapassar. Se alguém tiver como me ajudar, ficarei muito grata.
  2. Fala pessoal. Quero fazer o seguinte: Tenho um campo select e um campo input. Quando eu selecionar um item do meu campo select, quero enviar o ID desse item, e o valor do campo input, que no caso é uma data, para um script PHP, no PHP vou conferir uma situação e dizer se eu posso usar esse item ou não. Alguém pode me mostrar um exemplo? Obrigado.
  3. Amigos bom dia, sou novo aqui Tenho a seguinte tabela : gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88 codigo: <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>
  4. Richard.Ribeiro

    Não alterar o select uma vez já selecionado

    Fala Pessoal.. Bom dia.. uma ajuda por favor. não sei se e a melhor opção mais, gostaria de criar um id sequencial id="material" para resolver seguinte problema.. com javascript eu crio select com dados selecionados anteriormente, e crio mais opção no caso de haver mais pedido, porém toda vez que preciso troca a categoria o PRIMEIRO selecte que já possui um item e resetado. como posso resolver isso O PRIMIEIRO SELECT NÃO MUDAR. uma vez que á possui value selected segue todo código: <div id="box" > <form id="cadastro" method="post"> <?php if(isset($_POST['acao'])){ $ide = $_POST['ide']; $data = $_POST['data_pedido']; $username=$_SESSION['username']; $justificativa = $_POST['justificativa']; $id_tipo_material = $_POST['material']; $qnt_solicitada = $_POST['qnt_solicitada']; //cadastrar no banco de dados! $gravar = new Painel(); $id_gsm = $gravar->cadastrarGsm($data,$username,$justificativa,$ide); $gravar->cadastrarItem($id_gsm,$id_tipo_material,$qnt_solicitada); Painel::alert('sucesso','Pedido realizado com sucesso!'); } $ConsultaIde = ConexaoBD::conectar()->prepare("SELECT vsat_gilat, 'IDE: '||vsat_gilat|| ', Situação:'|| situacao|| ', Localidade:'||localidade|| ', Logradouro: '||logradouro as local FROM vsat WHERE vsat_gilat != '' AND situacao = 'Ativo'"); $ConsultaIde->execute(); $ConsultaIde = $ConsultaIde->fetchAll(); ?> <div > <div class="form-group"> <label>Selecione uma IDE</label> <select class="ide" name="ide" id="ide" required> <option disabled selected>-- Selecione IDE -- </option> <?php foreach ($ConsultaIde as $key => $value) { ?> <option value="<?php echo $value['vsat_gilat'];?>"> <?php echo $value['local'];?> </option> <?php }?> </select> <label>Data da Solicitação do Material :</label> <input type="text"value="<?php echo date('d/m/Y'); ?>" name="data_pedido" readonly > </div><!--form-group--> <div class="form-group"> <label>Justificativa do pedido:</label> <textarea rows="8" cols="80" name="justificativa" required></textarea> </div><!--form-group--> <div class="form-group"> <label>Selecione Sistema:</label> <select name="id_categoria" id="id_categoria"> <option selected disabled> --- Selecione o Sistema ---</option> <?php $consulta= ConexaoBD::conectar()->prepare("SELECT id_sistema, descricaos FROM public.cadastrar_sistema"); $consulta->execute(); while($row_cat_post = $consulta->fetch(PDO::FETCH_ASSOC) ) { echo '<option value="'.$row_cat_post['id_sistema'].'">'.$row_cat_post['descricaos'].'</option>'; } ?> </select> </div><!--form-group--> <div class="form-group"> <label>Selecione Padrão:</label> <span class="carregando">Aguarde, carregando...</span> <select name="id_sub_categoria" id="id_sub_categoria" > <option value="">--- Selecione o Padrão ---</option> </select> </div><!--form-group-select--> </div> <div class="pedido"> <div class="remover"> <label>Selecione Material:</label> <span class="carregando">Aguarde, carregando...</span> <select name="material[]" id="material"> <option value="">--- Selecionte o Material ---</option> </select> <input type="text" id="quantidade" name="qnt_solicitada[]" placeholder="Digite a Quantidade" > <button type="button" name="button" class="removedor">Remover Item</button> </div> </div> </div> <button type="button" name="button" class="clonador">Novo Item</button> <input type="submit" name="acao" value="Cadastrar!"> </form> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.4.2"); </script> <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#id_categoria').change(function(){ if( $(this).val() ) { $('#id_sub_categoria').hide(); $('.carregando').show(); $.get('sub_categorias_post?search=',{id_categoria: $(this).val(), ajax: 'true'}, function(j){ html = $.parseHTML(j); j=JSON.parse(html[16].textContent.trim()); var options = '<option value="">Escolha Subcategoria</option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>'; } $('#id_sub_categoria').html(options).show(); $('.carregando').hide(); }); } else { $('#id_sub_categoria').html('<option value="">– Escolha Subcategoria –</option>'); } }); }); $(function(){ $('#id_sub_categoria').change(function(){ if( $(this).val() ) { $('#material').hide(); $('.carregando').show(); $.get('sub_categorias_post2?search=',{id_sub_categoria: $(this).val(), ajax: 'true'}, function(j){ html = $.parseHTML(j); console.log(html); j=JSON.parse(html[16].textContent.trim()); var options = '<option value="">Escolha Subcategoria</option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>'; } $('#material').html(options).show(); $('.carregando').hide(); }); } else { $('#id_sub_categoria2').html('<option value="">– Escolha Subcategoria –</option>'); } }); }); </script> <script> $(document).ready(function(){ $(document).on('click', '.clonador', function(e){ var elm_html = $('.pedido').html(); var counter = 0; //faz uma cópia dos elementos a serem clonados. e.preventDefault(); var elementos = elm_html.replace(/\[[0\]]\]/g, '['+ counter +']'); //substitui o valor dos index e incrementa++ counter++; $('#cadastro').append(elementos); //exibe o clone. }); }); $(document).on('click', '.removedor', function (event) { event.preventDefault(); $(this).parents('.remover').remove(); // navega até o pai com a classe pedido e remove ele inteiro }); </script> <?php die(); ?> </div><!--box-content-->
  5. Renan Leite

    Grunt + Babel Dinâmico

    Fala pessoal, Estou utilizando grunt + babel para compilar meu código, acontece que minhas pastas estão organizadas da seguinte maneira. - pasta1 - amd -src - arquivo.js - pasta2 - amd -src - arquivo.js - pasta3 -subpasta3 - amd - src -arquivo.js E eu só consigo usar o babel de uma forma muito específico, por exemplo: grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: './pasta1/amd/src', // aqui so especifico a pasta1 src: ['*.js'], dest: '.pasta1/amd/babel/' // aqui so especifico a pasta1 }] } } Eu queria que ele rodasse em todas as pastas amd/src e gerasse dentro da propria pasta src/ os arquivos compilados pelo babel, já tentei o seguinte: grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: '**/amd/src', src: ['*.js'], dest: '**/amd/babel/' }] } } CWD: Não sei porque nao funciona, a ideia era pegar todas as pastas que contem as pastas amd/src e tornar isso a base DEST: nessa parte eu não faço ideia de como deixar o dest (pasta babel/ gerada) exatamente dentro da pasta que está o src, por exemplo... dentro de pasta1/src criar a pasta babel/ com todos arquivos .js compilados da pasta1, dentro de pasta2/src criar a pasta babel/ com todos arquivos .js compilados da pasta2
  6. uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo: Frase: “Quem parte e reparte fica com a maior parte” Palavra antiga: “parte” Palavra nova: “parcela” Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela” function trocarNome(){ var frase = document.getElementById("frase").value; var strAntiga = document.getElementById("strAntiga").value; var strNova = document.getElementById("strNova").value; //frase = frase.split(" "); var a = frase.lastIndexOf(strAntiga); var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova); document.getElementById("demo").innerHTML = "Certo"; }
  7. oomaikoo

    Comparar variável no IF, ELSE

    Boa noite pessoal, estou tentando fazer um código, para mostrar um banner em meu site, quando o usuário entrar, baseado na localização dele. É basicamente o seguinte: a API de geolocalização retorna o nome da cidade, e, se for a cidade, então mostre o banner. Se não for, mostre outro. O código JavaScript que estou usando é esse: <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> A cidade é: <span id="user_city"></span> Esse código retorna o nome da cidade no <span id>.Porém eu preciso fazer um IF, ELSE no próprio JavaScript, para mostrar o banner ou não. Seria basicamente assim: <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } if (city == "nomedacidade") { document.write ("<img src='banner1.jpg'></img>"); } else { document.write ("<img src='banner2.jpg'></img>"); } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> O problema é que a variável city não fica setada dentro do if, não retorna o nome da cidade, eu só queria comparar no if o nome da cidade com o que a API retorna.Alguém tem alguma ideia?
  8. A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS, deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
  9. l> <head> <title>Pergunta 1</title> </head> <body> <h3>Pergunta 1</h3> <form name="resp" action="pergunta2.php" method="POST"> O que é nanotecnologia?<br><br> a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br> b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br> c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br> d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br> e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br> <br><br> <input type="submit" name="confirmar" value="confirmar"> </form> <?php if(isset($_POST['confirma'])){ $resposta= $_POST['resposta']; $certa= $_POST['certa']; $certa= "b";s if($resposta==$certa){ echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>'); }else{ header('location:pergunta1.php'); } } ?> </body> </html>
  10. odenilson marques

    Redirecionamento de Formularios

    Ola pessoal, estou precisando de uma força! segue a situação. tenho 3 formulário em um projeto, sendo eles: form_cad_empresa form_cad_atividade form_cad_processo no form_cad_atividade e form_cad_processo tenho uma combobox que lista todas empresas cadastradas no form_cad_empresa, porém no form_cad_atividade e no form_cad_processo também tenho um link que redireciona o usuário para o form_cad_empresa para ele cadastrar a empresa caso não encontre a empresa na combobox do form_cad_atividade e form_cad_processo, porém gostaria que quando terminasse o cadastro do form_cad_empresa este teria que ser redirecionado para o form_cad_atividade ou form_cad_processo, ou seja ele retornaria para formulario que chamou o form_cad_empresa. Alguém pode me da um norte?
  11. michael450

    Listagem em tempo real

    Senhores, boa tarde. Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe" na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo. Essas informações não são salvas em DB, é apenas para consulta. Se alguém puder ajudar serei muito grato, Abraço. Michael Douglas
  12. JenneferBarbosa

    Busca com vários campos com PHP e MySQL

    Pessoal, sou nova aqui no Fórum e estou começando a estudar PHP. Estou com dúvidas quanto a pesquisa com vários campos, consegui fazer para um campo só, porém quando tento para vários campos não funciona. Fiz algumas pesquisas e só consegui achar buscas com 'selects e options' e eu queria que ele pegasse o que foi digitado no input e fizesse a busca, mas o usuário não precisaria informar todos os campos (se não quisesse). Quando clico em 'Pesquisar' aparece todos os dados do banco. E uma outra dúvida, como faz para que os dados pesquisados sejam exibidos na mesma tela (abaixo do formulário de pesquisa) <form method="POST" id="form-pesquisa" action="busca.php"> Livro: <input type="text" name="nome" id="nome" placeholder="Fulano de Tal"> Autor: <input type="text" name="autor" id="autor" placeholder="Fulano de Tal"> Edicao: <input type="text" name="edicao" id="edicao" placeholder="Fulano de Tal"> <input type="submit" name="enviar" value="Pesquisar"> </form> <ul class="resultado"></ul> $nome = $_POST['nome']; $autor = $_POST['autor']; $edicao = $_POST['edicao']; //Pesquisar no banco de dados nome do livro referente a palavra digitada pelo usuário $livros = "SELECT * FROM livro WHERE nome OR autor OR edicao ORDER BY nome ASC"; $resultado_livros = mysqli_query($conn, $livros); if (mysqli_num_rows($resultado_livros) <= 0) { echo "Nenhum livro encontrado..."; } else { while ($rows = mysqli_fetch_assoc($resultado_livros)) { echo "<li>" . $rows['codigo'] . "</li>"; echo "<li>" . $rows['nome'] . "</li>"; echo "<li>" . $rows['autor'] . "</li>"; echo "<li>" . $rows['edicao'] . "</li>"; } } . Como se ele fizesse a busca internamente e mostrasse ao usuário o que ele pesquisou sem ele sair da tela em que está o form
  13. rodbacana

    Criar gráficos com react native

    Boa noite senhores(a), estou iniciando agora com react native e firebase, estou tentando criar uma aplicação onde você loga com e-mail e senha, logo após irá aparecer uma lista com as ações da bolsa de valor pra que você possa escolher uma delas. Quando clicar sobre qualquer uma, será exibido um gráfico com as oscilações, e o usuário poderá criar um alerta que quando a ação atingir uma valor(seja ele positivo ou negativo) o celular dispare uma alerta. A questão é: a tela de login e as validações, eu consegui fazer. Mas não faço a mínima idéia de como criar os gráficos baseados no consumo de uma api rest que eu tenho aqui. Alguém pode me ajudar ?
  14. Criar um sistema de votação para uma premiação musical. Esse sistema deverá ser desenvolvido utilizando HTML + Javascript ES6. a) Existem 4 candidatos concorrendo ao prêmio: i) Rita Lee (número 100) ii) Cartola (número 101) iii) Ney Matogrosso (número 102) iv) Anitta (número 103) b) Para realizar a votação, o usuário terá que digitar seu CPF e o número do candidato. i) O usuário não pode votar duas vezes. ii) Se o usuário votar em um número inválido, o sistema contabilizará esse voto como nulo. c) Devido a um conflito da confraternização, a candidata Anitta foi desclassificada mas não deu tempo de retirá-la do painel de votação. Você terá que realizar uma validação avisado que o voto nela não é válido (dando a possibilidade desse mesmo usuário votar em outro candidato). d) O sistema deve mostrar automaticamente a quantidade e porcentagem de voto de cada candidato (parecido com o protótipo). i) O cálculo da porcentagem dos candidatos deverá desconsiderar os votos nulos LINK DO PROTOTIPO: https://www.figma.com/proto/S8tKx3hDbJJNaWJ9WFjzINVY/Prova?node-id=0%3A1&viewport=766%2C1015%2C0.5&scaling=scale-down&redirected=1
  15. Fala galera... Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver... A nível de conhecimento, segue código para::: 1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora. 2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc... CODE: $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID; Dicas, Sugestões como fazer, realizar, agradeço. Obrigado.
  16. Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo. http://www.jquery-steps.com/Examples if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
  17. Guss

    Oque tem de errado?

    var carro = { cor = "azul", modelo = "fusca", marca = "Volwagen, kms = 10000, combustivel = "gasolina" }
  18. _FelipeOlvr

    Scroll

    Oi pessoal, blz? Bom, passei quase a tarde toda pra fazer o seguinte: Imagina que o body tem scroll Y. agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ). Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body. ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário ) Fiz um layout básico pra simular o layout em que quero fazer isso. Segue: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
  19. eduardaarosaa

    Event Onclick

    Estou tentando fazer um validador de idade, mas meu onclick não está retornando como o esperado. O caminho para o aquivo externo está correto, já testei com um alert. Meu HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Verificador de Hora</title> <link rel="stylesheet" type="text/css" href="style/style.css"> </head> <body> <header> <h1>Verificador de Idade</h1> </header> <section> <div> <p>Ano de nascimento: <input type="number" name="txtnumber" id="txtano"> </p> <p> Sexo: <input type="radio" name="radiosex" id="masc" checked> <label for="masc">Masculino</label> <input type="radio" name="radiosex" id="fem" > <label for="fem">Feminino</label> </p> <p> <input type="button" value="Verificar" onclick="verificar()"> </p> </div> <div id="res"> Preencha os campos e veja o resultado. </div> </section> <footer> <p>&copy; Eduarda Rosa</p> </footer> <script src="script/script.js"></script> </body> </html> e o JS: function verificar(){ var data = new Date(); var ano = data.getFullYear(); var fano = document.getElementById('txtano'); var res = document.querySelector('div#res'); if(fano.Value.length == 0 || fano.value > ano){ window.alert("Error, verifique os dados e tente novamente!"); }else{ window.alert("Ok"); } }
  20. Então, eu consigo alterar a quantidade do meu produto no carrinho atravez do php, mas da um reload na pagina, e dessa forma fica inviavel, eu gostaria de alterar o valor atravez de um input ou algo assim, pra que eu pudesse alterar a quantidade sem que ocorresse o reload na pagina, soube que isso é feito atravez do javascript, e eu não sei nada dessa linguagem, ainda tenho dificuldade até no PHP, se alguem puder me ajudar eu agradeço de verdade, aqui tá o código do meu carrinho: < <?php session_start(); if (!isset( $_SESSION['itens'] ) ) : $_SESSION['itens'] = array(); endif; if ( isset( $_GET['add'] ) && $_GET['add'] == "carrinho" ) : $idProduto = $_GET['id']; if (!isset ($_SESSION['itens'][$idProduto])) : $_SESSION['itens'][$idProduto] = 1; else: $_SESSION['itens'][$idProduto] +=1; endif; endif; if ( count( $_SESSION['itens'] ) == 0 ) : echo ' <h1>Carrinho vazio</h1>'; else: $_SESSION['dados'] =array(); $conexao = new PDO ('mysql:host=localhost;dbname=meusprodutos',"root", ""); ?> <table > <thead> <th>Nome</th> <th>Preço</th> <th>Quantidade</th> <th>Subtotal</th> <th>Opções</th> </thead> <tbody> <?php $totalcarrinho = 0; foreach ( $_SESSION['itens'] as $idProduto => $quantidade ) : $select = $conexao->prepare("SELECT * FROM produtos WHERE id=?"); $select ->bindParam(1, $idProduto); $select ->execute(); $produtos = $select->fetchAll(); $total = $quantidade * $produtos[0]["preco"]; if(count( $_SESSION['itens'] ) == 0 ) : $totalcarrinho = 0; else: $tempcarrinho = $totalcarrinho; $totalcarrinho = $tempcarrinho + $total; endif; ?> <tr> <td><div align="center" style="font-size:20px; font-family: verdana"> <font color="black"><?=$produtos[0]["nome"]?></font> </div></td> <td><?=number_format( $produtos[0]["preco"], 2, ", ", "." )?></td> <td><div align="center"><a href="remover.php?remover=carrinho&id=<?=$idProduto?>">◄</a> <?=$quantidade?><a href="carrinho.php?add=carrinho&id=<?=$idProduto?>">►</a> </div></td> <td><?=number_format( $total, 2, ",", "." )?></td> <td> <a href="remover2.php?remover=carrinho&id=<?=$idProduto?>">Remover</a> </td> </tr> <?php array_push($_SESSION['dados'], array ('id_produto' => $produtos[0]["nome"], 'quantidade' => $quantidade, 'preco' => $produtos[0]["preco"], 'total' => $total ) ); endforeach; ?> </tbody> </table> <table> <td><div align='center' style='font-size:25px;font-family:Verdana'>Total <?=number_format( $totalcarrinho, 2, ",", "." )?></div></td> </table> <?php echo '<a href="finalizar.php"><button class="button2" type="submit">Finalizar pedido</button></a>'; endif; ?> >
  21. tiagosp

    Jquery e JavaScript Regular

    Olá, tenho uma duvida a respeito da mesclagem entre Jquery e Js regular. Sei que Jquery é um JS simplificado, porém gostaria de saber se existe alguma regra quanto a utilização de ambos no mesmo script, por exemplo: var nome = $("$nome").text(); alert(nome); Posso utilizar ambos sem problemas, ou há alguma exceção, ou ainda uma regra de fato.
  22. eduardaarosaa

    Onclick button

    Estou estudando Js, fiz esse exemplo abaixo porém o onlick não está chamando a função, nada acontece quando quando clico no botão. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Somando números</title> </head> <body> <h1>Soamando valores</h1> <input type="number" name="txt0" id="txt1"> + <input type="number" name="txt2" id="txt3"> <input type="button" value="somar" id="botao" onclick="somar()"> <div id="res"> </div> <script> res.addEventListener('mouseeenter', entrar); function somar(){ var n1 = window.document.querySelector("input#txt1"); var n2 = window.document.querySelector("input#txt3"); var n1 = Number(txt1.value); var n2 = Number(txt3.value); var soma = (n1+n2); var res = window.document.getElementById("res"); res.innerHTML(`A soma é de ${soma}`); } function entrar(){ area.style.background="red"; } </script> </body> </html>
  23. Olá, no meu projeto tenho uma animação ao scroll, quando me aproximo do elemento ele "surge" de algum lado, porém por alguma razão somente alguns elementos do site estão funcionando 100%, outros, no inspecionar mostra que a classe ANIMATE já é adicionada no elemento assim que a página é carregada, e a mesma não é removida mesmo quando eu me aproximo e afasto do elemento. Fazendo alguns testes vi que quando o elemento animado está fora do pai SECTION funciona normalmente, quando está dentro não (com exceção do primeiro elemento animado do site). Fiz o upload do código para o JSFiddle, https://jsfiddle.net/kuxf7mep/ ,como pode ver o elemento ARTICLE na linha 101 está animado normalmente, porém os elementos HEADER da linha 147 e o MAIN da linha 152 estão com a animação mas não funcionam. OBS: Podem fazer o teste colocando um elemento animado dentro e fora da section.
  24. Tenho uma tabela chamada bilhete, preciso que o usuário, ao clicar no botão que abre um modal, realize uma consulta dentro dessa tabela, essa consulta precisa pegar um id aleatório e exibir o bilhete entro do modal, algo que simule uma caixinha de bilhetes motivacionais, que pode ser retirado um bilhete por vez... Mas eu não consigo exibir os dados da consulta dentro do modal... por favor me ajudem, sou iniciante nisso Esse é meu index.php <?php include_once "db.php"; $result_bilhete = "SELECT * FROM bilhete WHERE idbilhete = 4"; $resultado_bilhete = mysqli_query($conexao, $result_bilhete); $row_bilhete = mysqli_fetch_assoc($resultado_bilhete); ?> <button type="button" class="btn btn-primary view_data" id="<?php echo $row_bilhete['idbilhete']; ?>"data-toggle="modal" data-target="#visulUsuarioModal">Bilhetes</button> <!-- Modal --> <div class="modal fade" id="visulUsuarioModal" tabindex="-1" role="dialog" arial-labelledby="Rotulo do modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="titulo-modal">Bilhete Motivacional</h4> </div> <div class="modal-body"> <span id="p-bilhete"></span> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Salvar Bilhete</button> </div> </div> </div> </div> <script> $(document).ready(function(){ $(document).on('click','.view_data', function(){ var idbilhete = $(this).attr("idbilhete"); //alert(idbilhete); //Verificar se há valor na variável "idbilhete". if(idbilhete !== ''){ var dados = { idbilhete: idbilhete }; $.post('vizualizarBilhete.php', dados, function(retorna){ //Carregar o conteúdo para o bilhete $("#p-bilhete").html(retorna); $('#visulUsuarioModal').modal('show'); }); } }); }); </script> Esse é meu vizualizarBilhete.php <?php if(isset($_POST["idbilhete"])){ include_once "db.php"; $resultado = ''; $idBilhetes = rand(4, 10); $result_bilhete = "SELECT * FROM bilhete WHERE idbilhete = 4"; $resultado_bilhete = mysqli_query($conexao, $result_bilhete); $row_bilhete = mysqli_fetch_assoc($resultado_bilhete); while($row_bilhete = mysqli_fetch_assoc($resultado_bilhete)){ $resultado .= '<dl class="row">'; $resultado .= '<dt class="col-sm-3">Bilhete</dt>'; $resultado .= '<dd class="col-sm-9">'.$row_bilhete['bilhete'].'</dd>'; $resultado .= '</dl>'; echo $resultado; } }
  25. Gostaria de saber como realizar a seguinte ação: Quero que, ao selecionar um campo de uma lista de categorias, outra lista seja gerada com as subcategorias. Segue exemplo do site Mercado Livre, durante o processo de anúncio de um produto: Como eu poderia criar o código javascript e html? Esses são os códigos html que uso no documento view: <div class="form-group"> <label class="col-sm-3 control-label" for="input-category"><span data-toggle="tooltip" title="<?php echo $help_category; ?>"><?php echo "Categorias"; ?></span></label> <!-- $entry_category --> <div class="col-sm-9"> <select name="product_category" id="product-category" size="10" class="form-control"> <?php foreach($product_categories as $product_category){ ?> <?php if($product_category['parent_id'] == 300 && $product_category['level'] == 0){ ?> <option value="<?php echo $product_category['category_id']; ?>"><?php echo $product_category['name']; ?></option> <?php } ?> <?php } ?> </select> <select name="product_category" id="product-subcategory" size="10" class="form-control"> <?php foreach($product_categories as $product_category){ ?> <?php if($product_category['parent_id'] == 59 && $product_category['level'] == 1){ ?> <option value="<?php echo $product_category['category_id']; ?>"><?php echo $product_category['name']; ?></option> <?php } ?> <?php } ?> </select> </div> </div> Output: Obs 1: o código html é um teste para a categoria Acessórios (category_id = 59) gerando as subcategorias dessa categoria (subcategorias com parent_id = 59), mas gostaria de saber como gerar uma lista para cada categoria selecionada. Obs 2: no output é gerada a tabela das subcategorias mesmo sem clicar no campo Acessórios, diferentemente do Mercado Livre. Alguém poderia me ajudar com isto? Preciso resolver o quanto antes. Agradeço desde já a atenção e a ajuda!
×

Important Information

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