Jump to content

VCastilho

Members
  • Content count

    12
  • Joined

  • Last visited

Community Reputation

0 Comum

About VCastilho

  • Birthday 10/09/1998

Informações Pessoais

  • Sexo
    Masculino
  1. VCastilho

    Filtro Personalizado JavaScript

    Consegui utilizando o seguinte código: $(function(){ $('button').click(function(){ var teste = $(this).attr('value'); $('div').find('.mark').hide(); $('div').find('.'+teste).show(); }); });
  2. VCastilho

    Deformação JavaScript no Wordpress

    Realmente resolveu o problema da organização, porém quando coloco no Wordpress ainda continua deformando, sendo que em vez de quando eu uso o botão de mover ele mover a parte horizontal, esta movendo o horizontal e vertical, conforme na foto anterior Agradeço pela resposta
  3. Bom Dia Estou tentando aplicar um HTML com Javascript no Portifólio do Meu Wordpress Mas assim que coloco ele deforma, como as imagens no final: Em vez de modificar apenas horizontalmente, modifica também verticalmente, iguais as imagens, conferi o código e não localizei algo que causa isso, sendo que se visualizar o código no navegador, esta normal. A parte que esta desalinhado creio que consigo arrumar depois com o CSS Segue o código completo: <!doctype> <html> <head> <meta charset="utf-8"> <style> * { font-size: 16px; box-sizing: border-box; } button { display: block; margin: auto; } article { position: relative; display: inline-block; } aside { height: 200px; max-width: 260px; font-size: 3.2rem; font-weight: bold; line-height: 200px; display: inline-block; vertical-align: bottom; } aside#left { text-align: right; padding-right: 2rem; } aside#right { text-align: left; padding-left: 2rem; } .img-comp-container { height: 200px; min-width: 820px; position: relative; text-align: center; } .img-comp-img { width: 300px; height: 200px; overflow: hidden; position: absolute; } .img-comp-img img { display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; width: 24px; height: 24px; background-image: url("http://images.tcdn.com.br/678962/themes/37/img/clicker1.png?325.80026377726244"); opacity: 1; } </style> </head> <body> <button onclick="initComparisons()">Centralizar ajustes</button> <div class="img-comp-container"> <aside id="left">Antes</aside> <article> <div class="img-comp-img "> <img src="https://www.lupadigital.info/wp-content/uploads/2018/05/imagens-gratis.jpg" width="280" height="200" alt="" /> </div> <div class="img-comp-img img-comp-overlay"> <img src="http://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg" width="280" height="200" alt="" /> </div> </article> <aside id="right">Depois</aside> </div> <script> slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); console.log(getId('right')); getId('right').style.width = getId('left').offsetWidth; function initComparisons() { var x, i, c, cc; getId('left').style.color = "#808080"; getId('right').style.color = "#808080"; x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { x[i].style.width = "300px"; compareImages(x[i]); } function compareImages(img) { var clicked = 0, w = img.offsetWidth, h = img.offsetHeight; img.style.width = (w / 2) + "px"; img.parentElement.insertBefore(slider, img); img.parentElement.style.width = w; img.parentElement.style.height = h; slider.style.top = (h / 1) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; slider.addEventListener("mousedown", slideReady); window.addEventListener("mouseup", slideFinish); slider.addEventListener("touchstart", slideReady); window.addEventListener("touchstop", slideFinish); function slideReady(e) { e.preventDefault(); clicked = 1; window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { clicked = 0; } function slideMove(e) { var pos; if (clicked == 0) return false; pos = getCursorPos(e) if (pos < 0) pos = 0; if (pos > w) pos = w; slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; x = x - window.pageXOffset; return x; } function slide(x) { c = 225 * x / w; cc = 225 - c; getId('right').style.color = "rgb(" + c + ',' + c + ',' + c + ")"; getId('left').style.color = "rgb(" + cc + ',' + cc + ',' + cc + ")"; img.style.width = x + "px"; slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } } function getId(ref) { return document.getElementById(ref); } initComparisons(); </script> </body> </html> Sendo que estou tentando utilizar tudo no mesmo arquivo, com o e o Estou fazendo errado? Há uma forma correta?
  4. VCastilho

    Filtro Personalizado JavaScript

    Bom Dia Estou desenvolvendo um Filtro Personalizado, no qual vou criando um arvore com o cliente e assim o levando ate o objetivo dele Segue o link do filtro: https://github.com/VCastilho/filtro Porém chego até o "2 Câmeras" e o filtro não funciona mais, já revisei, coloquei o JS em validadores e não achei o erro, poderiam me dar uma ajuda? Atenciosamente Vinicius Castilho
  5. VCastilho

    Função ao clicar no botão

    Entendo, não tinha reparado na tag </script> na verdade estava fazendo alguns testes e no meio deles devo ter esquecido de incluir dentro da tag, peço desculpas O Css tinha um antigo ali, eu apaguei acabei esquecendo a chave Coloquei "url" pois estava usando uma direto do PC, como vai ser alterada deixei apenas como referência, pois sei que a chamada não é a mesma, queria saber qual é a chamada certa.... Assim a função que preciso creio que é mais viável utilizar a Tag <if>, <else> e <ifelse> porém não tenho experiencias com as mesmas e não consigo desenvolve-las Pois preciso assim, que ao clicar no botão 1 seja tudo substituído para outro painel.... e o Botão 2 para outro painel.... e assim por diante, pretendo fazer como se fosse uma "arvore" 1 2 1a 1b 2a 2b 1aa 1ab 1ba 1bc 2aa 2ab 2ba 2bb Seria algo desse estilo... mas a função que utilizo agora ele não substitui mas sim apenas "injeta" o meu HTML Consegue me ajuda?
  6. VCastilho

    Função ao clicar no botão

    Boa Tarde Estou desenvolvendo um filtro que ao clicar nas opções, sobrepõe com novas opções e assim triando o meu publico aonde precisa Segue o código que desenvolvi: <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } <body> </html> Poderiam me ajudar a finalizar esse código? No caso ele coloca na parte de cima o texto que quero, mas no caso vou substituir com um outro filtro desse, e o Exemplo 1 esta com "url" pois quero enviar para uma pagina mas não consigo fazer essa chamada
  7. VCastilho

    Função ao clicar no botão

    Bom Dia Consegui da seguinte forma, mas com faço para que o código selecionado substitua o antigo? <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <body> </html>
  8. VCastilho

    Capturar ação de um botão

    Não consigo desenvolver o JavaScript para o funcionamento do Filtro
  9. VCastilho

    Capturar ação de um botão

    Bom Dia Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS? Segue o código: <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor
  10. VCastilho

    Criação de um Filtro Inteligente

    É exatamente oque eu estava precisando, muito obrigado!
  11. VCastilho

    Criação de um Filtro Inteligente

    Boa Tarde Estou tentando desenvolver um Filtro Inteligente, no qual funcionaria da seguinte forma: Filtro 1 Filtro 2 Filtro 3 Filtro 4 Opção 1 Opção 2 Opção 3 Ao selecionar a Opção 1 do Filtro 1 liberaria as opções do filtro 2 Filtro 1 Filtro 2 Filtro 3 Filtro 4 Opção 1 Opção 1 - a Opção 1 -b Opção 1 -c Assim escolhendo a opção do filtro 2 liberaria as opções do Filtro 3 e assim por diante Ao escolher a Opção 2 do Filtro 1 liberaria outras opções No caso preciso aplicar na plataforma da Tray, que é o de menos porém não consigo chegar ao código certo Estou tentando utilizar o HTML e o JQuery em conjunto para isso, conseguem me ajudar? Realmente estou perdido na situação Atenciosamente Vinicius Castilho
  12. Bom, estou criando um jogo básico para o meu curso, e estou tentando fazer um jogo de dois piratas que se batam, porem, segui vários tutoriais na internet mas só consigo mexer um deles, por mais que eu tente, ou procure na internet, n consigo fazer os 2 se mexerem e nem colocar a colisão entre eles.... irei postar o código logo abaixo e peço para que me corrigem no que errei eme ajude a por oque esta faltando por favor import flash.events.KeyboardEvent; var esquerda:Boolean = false; var direita:Boolean = false; var cima:Boolean = false; var baixo:Boolean = false; var velocidadeX:int = 20; var velocidadeY:int = 20; stage.addEventListener(KeyboardEvent.KEY_DOWN, TeclaPressionadaplayer1); stage.addEventListener(KeyboardEvent.KEY_UP, TeclaSoltaplayer1); stage.addEventListener(KeyboardEvent.KEY_DOWN, TeclaPressionadaplayer2); stage.addEventListener(KeyboardEvent.KEY_UP, TeclaSoltaplayer2); stage.addEventListener(Event.ENTER_FRAME, Movimentoplayer1); stage.addEventListener(Event.ENTER_FRAME, Movimentoplayer2); function Movimentoplayer1(e:Event):void{ if(esquerda){ player1.x -= velocidadeX; } else if(direita) { player1.x += velocidadeX; }else if(cima){ player1.y -= velocidadeY; } else if(baixo){ player1.y += velocidadeY; } } function TeclaPressionadaplayer1(e:KeyboardEvent):void{ if(e.keyCode == Keyboard.LEFT){ esquerda = true; } else if(e.keyCode == Keyboard.RIGHT){ direita = true; } else if(e.keyCode == Keyboard.UP){ cima = true; } else if(e.keyCode == Keyboard.DOWN){ baixo = true; } } function TeclaSoltaplayer1(e:KeyboardEvent):void{ if(e.keyCode == Keyboard.LEFT){ esquerda = false; } else if(e.keyCode == Keyboard.RIGHT){ direita = false; } else if(e.keyCode == Keyboard.UP){ cima = false; } else if(e.keyCode == Keyboard.DOWN){ baixo = false; } function Movimentoplayer2(e:Event):void{ if(esquerda){ player2.x -= velocidadeX; } else if(direita) { player2.x += velocidadeX; }else if(cima){ player2.y -= velocidadeY; } else if(baixo){ player2.y += velocidadeY; } } function TeclaPressionadaplayer2(e:KeyboardEvent):void{ if(e.keyCode == Keyboard.A){ esquerda = true; } else if(e.keyCode == Keyboard.D){ direita = true; } else if(e.keyCode == Keyboard.W){ cima = true; } else if(e.keyCode == Keyboard.S){ baixo = true; } } function TeclaSoltaplayer2(e:KeyboardEvent):void{ if(e.keyCode == Keyboard.A){ esquerda = false; } else if(e.keyCode == Keyboard.D){ direita = false; } else if(e.keyCode == Keyboard.W){ cima = false; } else if(e.keyCode == Keyboard.S){ baixo = false; } } enquanto deixo só as opções do player 1 ele se move normalmente, mas quando coloco a dos player 2, ambos n se movem, peco para que me ajudem OBS: Desculpe o erro de digitação no titulo, não consigo arrumar agora rsrsrs
×

Important Information

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