Ir para conteúdo

wanderval

Members
  • Total de itens

    183
  • Registro em

  • Última visita

  • Dias vencidos

    2

Tudo que wanderval postou

  1. wanderval

    Hover -> Dropdown é possível ?

    https://jsbin.com/mopumar/edit?html,css,output
  2. wanderval

    Criar formulário no estilo chatbot

    o que você tem que fazer é cria um form normal e usar: // CSS .form-float { position:fixed; bottom: 0; right: 0; width: height: z-index: }
  3. wanderval

    Div oculta atrapalhando no tempo de animação

    Tenho uma dica sim você expos o problema mas não relatou o que foi feito! agora já sabe pq não teve muitas respostas. E o que foi feito para que o elemento renderizado no desktop, não apareça na versão mobile? foi usado media-querie no css ou foi feito alguma lógica?
  4. wanderval

    Hover

    Pela sua descrição o opacity ou filter: opacity deveria funcionar: ex: https://jsbin.com/fohajeh/edit?html,css,output
  5. wanderval

    Quando não for no Dropdowns

    Você não vai conseguir com esse código, não vi nada de php ai além dos nomes dos arquivos, com esse html não vai conseguir mesmo mesmo o redirecionamento está sendo feito. funcionaria assim mas essa forma nos tempos de hoje não seria uma boa prática mas funciona: http://suapagina/index.php <div class="container"> <h2>Nesting Button Groups</h2> <p>Nest button groups to create dropdown menus:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div> <?php include 'index.php' ?> </div>
  6. wanderval

    Modal em JS

    Eu geraria essa modal usando o javascript, inicialmente como você não definiu nenhuma tecnologia apenas JS, poderia usar um plugin jQuery, ai no method de evento da modal você continua ou não a request. Eu criei um plugin tenta usar pra ver se te atende, ele tá funcionando pro propósito criado mais pode haver alguma falha, como ele é um plugin jQuery você teria que tb ter essa lib. ex de código: $.WModal({ type: type, overlay: false, title: 'Delete', message: 'Voce tem certeza que deseja deletar', cancel: function(e){ console.log('method:', e); }, confirm: function(e){ console.log('method:', e); } }); link:https://codepen.io/wanderval/pen/vbRxBB
  7. wanderval

    Como como fazer 3 input copiar 1

    Vou ser bem sincero, sua forma de analise é muito confusa, acredito que o que você queira é muito simples mas não consegui entender o que você realmente quer, você enumera os input na sua explicação até ai tudo bem depois coloca letras "A" e seguida refere-se a todos os "A". Faz um html pra exemplificar, eu não sei porque as pessoas chegam aqui com dúvidas e não colocam dúvida como código, você mesmo disse que está sendo perturbador então coloque o que fez até o momento isso ira ajudar outras pessoas no futuro. E note todos os pots que não tem respostas no forum são todas na qual a pessoa não caprichou nos detalhes.
  8. wanderval

    Recuperar objeto desse JSON

    o apelido está no nivel de dados: dd[0]: dd só possui 1 posição a 0 dados[5]: dados possuem 5 posições no array Estrutura base do seu Objeto: [ { "dd":[ { "dados":[], "apelido":"XPTO" } ] } ]; Seu objeto: [ { "dd":[ { "dados":[ { "id":"1", "modulo":"Recrutamento e Seleção", "iconemedio":"recruta_sel_48x48.png" }, { "id":"3", "modulo":"Desenvolvimento Organizacional", "iconemedio":"desto_org_48x48.png" }, { "id":"4", "modulo":"Análises", "iconemedio":"analises_48x48.png" }, { "id":"5", "modulo":"Senior Data Partner", "iconemedio":"senior-data-partners-48x48.png" }, { "id":"7", "modulo":"Home", "iconemedio":"home_48x48.png" }, { "id":"8", "modulo":"Administração do sistema", "iconemedio":"administrador_48x48.png" } ], "apelido":"XPTO" } ] } ]; Solução: [0].dd[0].apelido link: jsbin: https://jsbin.com/kisulasezu/edit?html,js,console,output
  9. Tenta usar regex $('div') .filter(function() { console.log(this.className) return this.className.match(/Conteudo+d/); }); Link: https://jsbin.com/gawevavose/edit?html,js,console,output
  10. wanderval

    Expressão aritmética JS

    O seu problema não é a operação mas o desconhecimento dos operadores da linguagem e dos tipos de dados. Informação: O operador "+": em javascript é usado para concatenar strings. O operador "+": tem como propósito de cálculo apenas os tipo numéricos Erro: Seu erro foi calcular "strings" usando o operador de concatenação. Solução: Deve-se converter os dados dos inputs "string" para um tipo numérico como float ou Int Ex: O parseInt está presente apenas no "minP" onde ocorreria a concatenação resultando no valor de "345" function algoritmo() { var horasP = document.getElementById("horas_p").value; //Valor de entrada: 5 var minP = document.getElementById("min_p").value; // Valor de entrada: 45 horasP = horasP * 60 + parseInt(minP); console.log(horasP); } Ex: Ideal em cálculos é trabalhar com todas as variáveis como números para garantir a exatidão function algoritmo() { var horasP = parseInt(document.getElementById("horas_p").value); //Valor de entrada: 5 var minP = parseInt(document.getElementById("min_p").value); // Valor de entrada: 45 horasP = horasP * 60 + minP; console.log(horasP); } Ex: Jsbin: https://jsbin.com/jatoxocubo/edit?html,css,js,console,output
  11. wanderval

    Vocês podem avaliar meu trabalho de Linguaguem de marcação

    Uma sugestão nessa tela, achei a tela em si com o layout bacana, mas essa parte informativa achei muito confusa, ainda mais sendo vinculado ao produto senti falta de organização e harmonia das informações na descrição do produto e a promoção deve ter uma categoria diferente deve ter destaque, uma coisa que senti falta e se é promoção de quanto é essa promoção? vou deixar uma sugestão de modificação mas avalie se a minha sugestão é plausível. Informação: na descrição do produto senti falta de hierarquia de font a informação está ali mais eu tenho que ficar identificando o que é o que, eu não entendo nada de bicicleta dessa forma eu tenho que me sentir confortável aprender com os detalhes mesmo que sejam detalhes básicos. Menu: O menu segue a tendência de cores sólidas mas quando dispara o evento hover ativa um background com border-radius, eu particularmente não achei legal pois ele ocupa todo o height do container, se fosse menor até ficaria legal, mais prefiro para ficar clean a utilização da border-bottom busquei em outros sites que trabalham com bicicletas e fiz uma alteração no seu layout fica aqui minha contribuição e espero que seja vista como uma critica construtiva que não necessariamente é boa mais é a minha pessoal.
  12. wanderval

    Menu Hover em CSS e HTML

    Nunca realizei nenhum projeto com essa ferramenta mas se houver alguma maneira a resposta estará aqui http://dev.tray.com.br/, pelo que vi eles tem documentação no github é so estudar a maneira que a tray lida com template e componentes e como integra com alguma api. Eu tentaria ver o funcionamento do menu hoje presente no seu template e travez dele cria rum componente ou se possivel extendendo do componente atual de menu se a logica de componente dessa ferramenta seguir a idea de outros frameworks.
  13. wanderval

    Ajuda para alinhar botões de calculadora JavaScript

    Fica dificil de ajudar você se você não colocar o seu css, apenas a lib do bootstrap não vai deixar nesse formato para que possa avaliar o problema, o problema está no seu css, então está faltando você coloca-lo aqui
  14. Fui cirúrgico e alterei poucas coisas no seu css usando o flexbox: nav { background-color:#003399; height:45px; font-size:25px; display: flex; } nav ul { height:auto; padding:8px 0px; margin:0px; display: flex; flex: 1; } nav li { display:inline; padding:0 10px; margin:0px; } nav li:last-child { display: flex; flex: 1; justify-content: flex-end; } nav a { text-decoration:none; color:#CC9900; padding:0px 8px 0px 8px; } nav a:hover { color:#CCFFFF; background-color:#666666; } link JsBin: https://jsbin.com/joxuxixoza/1/edit?css,output
  15. Existem maneiras diferentes de se fazer essa tab, uma delas e renderizar todo o conteúdo no DOM e dar display:none nos elementos não utilizados, esse eu não gosto muito; O outro modo e você ter um template padrão para as informações e apenas popule ele pegando a referência dos dados na lógica javascript essa é a que mais me agrada. Mas confesso que curti muito sua dúvida é raro por incrível que possa parecer alguém postar uma imagem de algo que tem como meta, fiz uma imprementação porque curto layout de media. espero que isso possa te ajudar e aproveita as musicas. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="tabs-container"> <div class="tabs-wrapper"> <span class="tab tab-0"><a onclick="setTab(0)">music 2018</a></span> <span class="tab tab-1"><a onclick="setTab(1)">music 2019</a></span> <span class="tab tab-2"><a onclick="setTab(2)">cyber music</a></span> <span class="tab tab-3"><a onclick="setTab(3)">laser violin</a></span> </div> </div> <div class="content-container"> <div class="content-wrapper"> <div class="panel-info"> <span class="title"></span> </div> <div class="panel-media"> <div class="panel-video panel-bottom"> <div> <span class="title">video</span> </div> <iframe class="youtube-player" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture"> </iframe> </div> <div class="panel-links panel-bottom"> <div> <span class="title">links</span> </div> <a class="links-area" href="" target="_blank"></a> </div> </div> </div> <div class="message-container"> <div class="message-wrapper"> <p class="message">escolha uma musica para ouvir</p> <button onclick="setRamdomChoice()">Clique aqui e eu escolho pra você</button> </div> </div> </div> </div> </body> </html> LESS: da pra converter para css pelo JSbIn body { background: #FE881B; font-family: arial; text-transform: uppercase; } .container { display: flex; flex-direction: column; .tabs-container { justify-content: flex-end; display: flex; .tabs-wrapper { background: #fff; width: 80%; height: 50px; justify-content: space-between; display: flex; padding: 0 10px; line-height: 40px; text-align: center; border-radius: 6px 6px 0 0; .tab { border-radius: 10px 10px 0 0; width: 24%; color: #fff; margin-top: 10px; cursor: pointer; &.tab-0 { background: #FE881B; } &.tab-1 { background: #14A30B; } &.tab-2 { background: #1C7BB9; } &.tab-3 { background: #565F5E; } &:hover, &.active { margin-top: 4px; transition-duration: 0.2s; } } } } .content-container { background: #fff; border-radius: 8px; box-shadow: 2px 0px 20px #616660; margin-top: -3px; padding: 10px; .content-wrapper { .panel-info { height: 100px; background: #FE881B; margin: 0 auto; border-radius: 6px; display: flex; .title { margin: auto; color: #FE881B; background: #fff; padding: 10px; border-radius: 20px; border: 1px solid #ccc; } } .panel-media { height: 300px; display: flex; padding-top: 10px; justify-content: space-between; align-content: center; .panel-bottom { background: #e3e6df; border-radius: 6px; text-align: center; line-height: 50%; .title { color: #fff; background: #000; padding: 3px 20px; border-radius: 20px; } } .panel-video { width: 53%; display: flex; flex-direction: column; align-content: center; justify-content: space-between; .youtube-player { width: 95%; height: 80%; margin: auto; } } .panel-links { width: 45%; display: flex; flex-direction: column; word-break: break-all; line-height: 1; .links-area { margin: auto; text-transform: initial; } } } } .message-container { background: #FE881B; color: #fff; text-align: center; padding: 10px 1px; text-transform: capitalize; button { background: #000; color: #fff; border: none; padding: 6px 10px; cursor: pointer; border-radius: 8px; } } } } JS: com alguns metodos ES6 // action method function setTab(tab, autoPlay = false) { var data = getDataTab(tab); if(validData(data)) { setActiveTab(tab); setPanelData(data); setPlayerData(data, autoPlay); setLinksData(data); } } // handler methods function validData(data) { const displayElement = (statusData, classElement) => { var elementWrapper = document.getElementsByClassName(classElement)[0]; return elementWrapper.style.display = statusData ? 'block' : 'none'; }; const displayMessage = statusData => { displayElement(statusData, 'message-container'); }; const displayContent = statusData => { displayMessage(!statusData); return displayElement(statusData, 'content-wrapper'); }; return data ? displayContent(true) : displayContent(false); } function setActiveTab(indexTab) { var tabs = document.getElementsByClassName('tab'); const removeActiveClass = () => { for(var item = 0; item < tabs.length; item ++) { tabs[item].classList.remove("active"); } }; const addActiveClass = () => { tabs[indexTab].classList.add("active"); }; removeActiveClass(); addActiveClass(); } function setPanelData(content) { var panelInfo = document.getElementsByClassName('panel-info')[0].children[0]; panelInfo.innerText = content.info.title; } function setPlayerData(content, autoPlay) { var player = document.getElementsByClassName('youtube-player')[0]; player.src = autoPlay ? content.video.url+'?autoplay=1' : content.video.url; } function setLinksData(content) { var panelLink = document.getElementsByClassName('panel-links')[0].children[1]; panelLink.innerText = content.video.url; panelLink.href = content.video.url; } function setRamdomChoice() { const autoPlay = true; setTab(getRandomInt(0,3), autoPlay); } function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } // mock data function getDataTab(tabIndex) { var tabData = { 0: { info: { title: 'Music 2018' }, video: { url: 'https://www.youtube.com/embed/kXYFunwSIC8' } }, 1: { info: { title: 'Music 2019' }, video: { url: 'https://www.youtube.com/embed/hG-a6ofQXqE' } }, 2: { info: { title: 'Cyber Music' }, video: { url: 'https://www.youtube.com/embed/lMDOGbYOS6E' } }, 3: { info: { title: 'Laser Violin' }, video: { url: 'https://www.youtube.com/embed/MYE3PIZ3xRg' } } }; return tabData[tabIndex]; } // init setTab(null); link: https://jsbin.com/bitamurefu/2/edit?html,output
  16. wanderval

    glyphicon não aparece

    você tem alguma pasta de fonts que contenha essa biblioteca de fonts?
  17. wanderval

    Espaçamento entre as colunas no Bootstrap 4

    tenta isso aqui: .row { margin-right: 0; margin-left: 0; } link jsBin: https://jsbin.com/fuvecizilu/edit?html,output
  18. wanderval

    Edição de template

    Amigo sem querer ser chato, aqui no forum as pessoas são voluntárias isso quer dizer que muitos tem muito pouco tempo pra ficar no forum, então é tirado dúvidas pontuais, o que percebo é que você precisa de conceitos de front-end o que você quer se chama landing-page é existem muitos tutoriais na internet, então seria muito trabalhoso construir um tutorial afinal você e que tem que fazer o trabalho duro que é aprender desculpa ser duro mas essa é a realidade. quando você diz que não dá que é muito complicado pra você isso não é verdade e irei provar pra você que você consegue mudar a cor: o projeto que baixou usa muitas ferramentas para desenvolvimento: less, sass, gulp, node mas pelo que entendi você quer apenas o template correto? Então você precisa do index.html, img(pasta), css(pasta), vendor(pasta) e js(pasta) caso va aproveitar algum evento img css vendor js(opcional) index.html agora pra você mechar no template hoje no index.html ele está com esse link de estilo: <!-- Theme CSS --> <link href="css/agency.min.css" rel="stylesheet"> basicamente troque por: <!-- Theme CSS --> <link href="css/agency.css" rel="stylesheet"> assim vai conseguir alterar o arquivo css legivel, e aplicar as suas alterações, bom tá a minha dica, agora é com você meu chapa!
  19. wanderval

    Colocando sub menu em menu

    Dá uma olhada nessa implementação, basicamente o que eu fiz foi adicionar uma tag "ul" dentro da tag "li" de cada item, e no evento hover é exibido o sub menu de cada item principal do menu: HTML: <div id="menutop"> <div id="topmenu"> <ul> <li><img src="https://4.bp.blogspot.com/-t56wax3rupo/XEsaJP0vvBI/AAAAAAAAADI/KnF75is9HEMHGH0KDxOqTX3QhS0_v5tZgCLcBGAs/s1600/asasas.png" alt="MENU"> <ul> <li> <a href="URL">menu 1</a> <ul class="sub-menu"> <li><a href="URL">menu 1 1</a></li> <li><a href="URL">menu 1 2</a></li> <li><a href="URL">menu 1 3</a></li> </ul> </li> <li> <a href="URL">menu 2</a> <ul class="sub-menu"> <li><a href="URL">menu 2 1</a></li> <li><a href="URL">menu 2 2</a></li> <li><a href="URL">menu 2 3</a></li> </ul> </li> <li><a href="URL">menu 3</a></li> <li><a href="URL">menu 4</a></li> </ul> </li> </ul> </div> </div> CSS adicionado: /*Custom CSS*/ #topmenu ul > li ul > li ul.sub-menu { display: none; } #topmenu ul > li ul > li:hover ul.sub-menu{ display: block; position: relative; } #topmenu li li { display: inline-block; } #topmenu ul > li ul > li ul.sub-menu li { padding-left: 30px; } link url:https://jsbin.com/pusovatemi/edit?html,css,output
  20. wanderval

    logo

    Você descreveu o seu problema de maneira muito superficial, já que sua logo pode estar sendo usada através do css usando background-image or "img" tag, pode estar sendo influenciada por elementos parents ou bibliotecas. Então você deveria colocar código aqui seu css ou elemento html que está recebendo o estilo do css, ou uma imagem sem isso seu post nunca será respondido, se você reparar seu anexo não está sendo carregado. quando você diz centralizar você da margem para duvidas afinal existem duas direções: vertical e horizontal mas na sua descrição não fica claro essa informação.
  21. use uma classe diferente de ".datepicker" no seu input essa classe já é usada pela biblioteca use uma classe diferente assim vai evitar conflitos ex: HTML: <input type="text" id="datepicker-custom"/> JS: $("#datepicker-custom").datepicker( { format: "mm/yyyy", autoclose: true, viewMode: "months", minViewMode: "years", }).on('changeDate', function(ev){ $(this).datepicker('hide'); }); link Jsbin: https://jsbin.com/qiyedahume/edit?html,output
  22. wanderval

    Mudar imagem no Menu

    seu código está apenas com um erro que é o nome do método 'geElementByID' o correto é 'getElementById' com o 'd' minúsculo: Errado: function mudaFoto(foto){ document.getElementByID("icone").src = foto; } Correto: function mudaFoto(foto){ document.getElementById("icone").src = foto; } Link exemplo: https://jsbin.com/wocawuzove/edit?html,css,js,output
  23. wanderval

    Converter valor para moeda

    Amigo onde está o html? acredito que assim você teria sua resposta, mas da forma que está o desenvolvedor teria que parar para analisar seu código e construir uma estrutura de marcação HTML, pra somente assim tentar te ajudar!
  24. wanderval

    Resultado da minha soma esta dando NaN

    o seu problema é simples você está tendo o erro 'NaN', porque o parseInt não consegue converter vazio para inteiro, é necessário que você crie uma validação e quando o valor for vazio deve substituir por zero (0). Mas o correto mesmo é que você utilizasse parseFloat pois está lidando com valores monetários e é muito comum lidar com valores fracionados. HTML: <p class="campo1"><span>Mensalidade Faculdade: </span>R$<input id="mensalidade" value="10"></p> <p class="campo1"><span>Aluguel: </span>R$<input id="aluguel" value=""></p> <p class="campo1"><span>Água: </span>R$<input id="agua" value="30"></p> <p class="campo1"><span>Luz: </span>R$<input id="luz" value="10"></p> <label> Resultado: <span id="resultado"></span> </label> <button onclick="despesas()">Calcular despesas</button> JS: function despesas(){ var mensalidade = document.getElementById("mensalidade").value; var aluguel = document.getElementById("aluguel").value; var agua = document.getElementById("agua").value; var luz = document.getElementById("luz").value; var total = validValue(mensalidade) + validValue(aluguel) + validValue(agua) + validValue(luz); document.getElementById("resultado").innerHTML = total; } function validValue(value) { if(!value) { return 0; } else { return parseInt(value); } } exemplo: https://jsbin.com/sifeyugavu/edit?html,js,console,output
  25. wanderval

    Api-- converter "Valor" em BitCoin

    Olá bobzznnn, Eu realmente fiquei um pouco confuso com o seu uso do termo "automaticamente", pois embora para o usuário isso seja transparente é necessário um processo para que isso aconteça e embora não exista a necessidade de haver um input de form é sim necessário um dado para a conversão que no caso é o valor em "dollar" mas vamos as minhas observações para o seu problema. O difícil que vejo e que você não expos o que hoje está usando como tecnologia no seu projeto, observei que está usando a linguagem "php" para exibir os dados então pelo que conheço no php puro existem dois métodos capazes de realizar um "GET" em uma api externa: (curl, file_get_contents) mas ambos por padrão ficam desabilitado nos servidores PHP por motivos de segurança sendo necessário serem habilitados para serem usados, nesse caso você terá que pesquisar existem muitos videos ensinando isso e por isso não coloquei um exemplo de código aqui já que os php testers online não rodam os scripts por ter esses métodos desabilitados. HTML: <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box"> <span class="info-box-icon bg-aqua"><i class="fa fa-usd"></i></span> <div class="info-box-content"> <span class="info-box-text">MEU SALDO</span> <span class="info-box-number">U$ <?php $saldo = Auth::user()->saldo; echo(number_format($saldo, 2, '.', ',')); ?> </span> <span class="info-box-number bitcoin">BTC <?php $saldo = Auth::user()->saldo; $parser = new Parsers(); echo($parser -> usdToBitcoin($saldo)); ?> </span> </div> </div> </div> </div> PHP: Já que está utilizando o conceito de Orientação a Objetos, então crie uma classe que seja responsável por conter o script que será usado para converter o valor de "USD to Bitcoin", tenha em mente que terá que usar uma API afinal está convertendo moedas e o valor de uma moeda para outra é variável, a api em si já é o trabalho duro feito, você somente irá consultar. <?php class Parsers { public function usdToBitcoin($usdValue) { // adiciona script para realizar GET on API // url https://blockchain.info/tobtc?currency=USD&value=500 return $bitCoinValue; } }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.