Ir para conteúdo

wanderval

Members
  • Total de itens

    183
  • Registro em

  • Última visita

  • Dias vencidos

    2

wanderval venceu o dia em Junho 10 2018

Teve o conteúdo mais curtido

Reputação

19 Levemente Bom

4 Seguidores

Sobre wanderval

  • Data de Nascimento 03/30/1984

Informações Pessoais

  • Sexo
    Masculino

Últimos Visitantes

617 visualizações
  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
×

Informação importante

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