Ir para conteúdo

wanderval

Members
  • Total de itens

    120
  • Registro em

  • Última visita

  • Dias vencidos

    2

wanderval venceu o dia em Junho 10

Teve o conteúdo mais curtido

Reputação

19 Levemente Bom

3 Seguidores

Sobre wanderval

  • Data de Nascimento 03/30/1984

Informações Pessoais

  • Sexo
    Masculino

Últimos Visitantes

438 visualizações
  1. wanderval

    Menu hamburguer com submenu - bootstrap

    1-Olá ment0r, pra começar acho você deveria usar o proprio menu responsivo do bootstrap. Isso vai facilitar sua vida https://getbootstrap.com/docs/4.0/components/navbar/#nav 2-você usa uma classe .navbar-brand que atualmente não ocupa o height de 100% entao quando você redimenciona a pagina o menu sobrepoe a imagem do logo e quando se aplica height 100% a img com a classe .img-sub é ocultada, acredito por você estar usado seu proprio css de menu esteja gerando conflito de css. Apos alterar para o menu do bootstrap acredito que alguns desses problemas possa desaparecer, caso contrario, acredito que precise melhor a estrutura do seu header. 3-não é algo que me parece responsivo você usar uma img para exibir uma frase, o correto seria usar um elemento de texto e aplicar icones, isso permite que você aumente sua fonte como quiser, e o container dessa frasse tb deve receber um cuidado para quando a tela for redimencionada ela ser colocada abaixo do menu para não gerar quebra do layout 4- Uma dica comece a usar flexbox ao invez de float, isso vai te poupar de alguns side-effects, sim mas não nesse projeto pq isso iria gerar outros tipos de dor de cabeça Resumindo: altere o menu para o elemento do menu recomendado pelo bootstrap aplique suas customizaçoes de layout de caso não obtiver um bom resultado, nos permita saber para ajudarmos você.
  2. wanderval

    HTTP e HTTPS no mesmo dominio?

    Olá Aprendiz, Antes de fazer a migração, da uma olhada nesse post, falando sobre o assunto especialmente se seu site for um sistema pra evitar dor de cabeça. Espero que isso ajude https://www.pedrodias.net/webmaster/migrar-para-https
  3. wanderval

    IF, ELSE (SE, ENTAO, SENAO COM INPUT DE FORMULARIO HTML

    Sua explicação está muito confusa faltando detalhes do calculo. 1-Você não recebe input, você insere dados no input, dado que suponho que seja nota, mas nao foi especificado como seriam os dados de cada campo 2-Qual decisao? 3- as variaveis são o resultado da media de quais variaveis?
  4. wanderval

    Ajuda com menu responsivo

    Olá Lunnie, Bom não estava com a tela atualizada então, postei e vi que conseguiu, mas não consigo apagar o post. Haviam 2 problemas na sua implementação -Eu resolvi colocando o z-index:1 na classe ".menu" rs, é o z-index ai resolveu o problema, assim ele sobrepoem o slider em telas menores .menu { position: fixed; width: 100%; box-shadow: 1px 1px 2px #333; -webkit-box-shadow: 1px 1px 2px #333; -moz-box-shadow: 1px 1px 2px #333; /*missing z-index*/ z-index: 1; } -O segundo problema era no script você não havia colocado o index na iteração do for assim os items de imagem não receberiam o display none e todas as imagens ficavam visiveis. for (i = 0; i < x.length; i++) { // error indice was missing // x.style.display = "none"; x[i].style.display = "none"; }
  5. Dei uma olhada no seu script e fiz uma implementação com base na imagem de componentes. Html: <body> <div class="counter-container"> <div class="counter"> <span class="label">contador</span> <span id="value">00</span> </div> <div class="slide"> <input id="slide" type="range" value="0" min="0" max="10"/> </div> </div> <div> <label> <input type="checkbox" id="activeMove"/> Move Item </label> </div> <div id="item" class="item" onclick="clickButton()"> click here </div> </body> JS: function clickButton() { startLoop(); } function startLoop() { var i = 0; var loopInterval = setInterval(function(){ if(i == 10){ clearInterval(loopInterval); } setCount(i); i++; }, 1000); } function setCount(value) { var countField = document.getElementById('value'); var slideField = document.getElementById('slide'); countField.innerHTML = value; slideField.value = value; moveItem(); } function moveItem() { var moveActive = document.getElementById('activeMove'); if (moveActive.checked) { var item = document.getElementById('item'); var rect = item.getBoundingClientRect(); var newPosition = rect.left + 1; item.style.transform = "translateX("+newPosition+"px)"; } } CSS: .counter-container { width: 200px; height: 50px; border: 2px solid #000; margin-bottom: 10px; border-radius: 8px; display: flex; flex-direction: column; } .counter-container .counter { justify-content: space-around; display: flex; flex-direction: row; border-radius: 8px; align-items: center; height: 100%; } .counter-container .counter #value { border: 1px solid #000; padding: 2px 10px; border-radius: 8px; } .counter-container .slide { margin: auto auto; } .item { width: 100px; height: 100px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; } Jsbin: https://jsbin.com/jugixeququ/edit?html,js,output
  6. wanderval

    Quando eu puxo uma imagem com <img src> ela vem deitada.

    Agora entendi o seu problema, como li no tópico do link que enviou, você aparentemente está tirando a foto de maneira que o metadata fique com o registro de orientação na vertical o EXIF, faça um teste tirando fotos com o celular em landscape(celular deitado) e portrait(posição comum) e veja qual posiçáo que esta tirando as fotos está causando esse problema, para solucionar o problema das imagens que hoje estão na posição incorreta utilize um editor de imagem para salvar na orientação correta. agora se for uma aplicação terá que fazer essa correção via código.
  7. wanderval

    Quando eu puxo uma imagem com <img src> ela vem deitada.

    só um toque na proxima vez coloca o seu codigo aqui, se é dificil pra você entender o que está acontecendo mesmo com o codigo, imagina para quem precisa analisar essa situação com base no teu relato
  8. wanderval

    Codigo de Formulario de Contato. Problema não responsivo

    realmente você tem um problema de responsividade, somente pra te informar esse padrão de construção de layout utilizando "table" é desaconselhavel, com o uso de css o resultado fica muito mais limpo hoje em dia. bom felipe fiz um refactor no seu código para deixar responsivo, mative as caracteristicas originais, alterando a estrutura html e criando um arquivo css, agora se essa prataforma não permitir adicionar um arquivo css separado ai será um problema, pois as alteraçoes podem ser feitas para deixar os campos do form fruidos com os inputs se adptando com o tamanho da tela quando em tamanho menor mas responsive layout é quando o layout também pode assumir um novo posicionamento, ai não me vem em mente como seria possivel, se a plataforma permite arquivo html separado de css ai fica mais facil. fica ai minha contribuição pro seu site. Html com estrutura alterada: <h2 id="orcamento">Solicite um orçamento</h2> <form id="contact-mail-page" action="http://www.mundoagua.com.br/enviar.php" method="post" accept-charset="UTF-8"> <div id="contato-titulo"> <p class="vermelho info-message"><strong>(* Preenchimento obrigatório )<br /></strong></p> <div class="container-form"> <label> <span>*Nome:</span> <input type="text" name="nome" size="65" maxlength="80" /> </label> <label> <span>*E-mail:</span> <input type="text" name="email" size="65" maxlength="50" /> </label> <label> <span>*DDD:</span> <input type="text" name="ddd" size="3" maxlength="2" id="ddd" /> </label> <label> <span>*Telefone:</span> <input type="text" name="telefone" size="20" maxlength="10" /> </label> <label> <span>Sexo:</span> <select name="sexo"> <option selected="selected" value="M">Masculino</option> <option value="F">Feminino</option> </select> </label> <label> <span>*Cidade:</span> <input type="text" name="cidade" size="65" maxlength="50" /> </label> <label> <span>Estado:</span> <select name="estado"> <option selected="selected">AC</option> <option>AL</option> <option>AM</option> <option>AP</option> <option>BA</option> <option>CE</option> <option>DF</option> <option>ES</option> <option>GO</option> <option>MA</option> <option>MG</option> <option>MS</option> <option>MT</option> <option>PA</option> <option>PB</option> <option>PE</option> <option>PI</option> <option>PR</option> <option>RJ</option> <option>RN</option> <option>RO</option> <option>RR</option> <option>RS</option> <option>SC</option> <option>SP</option> <option>SE</option> <option>TO</option> </select> </label> <label class="wrapper-message"> <span class="span-center">Mensagem:</span> <div class="container-textbox"> <textarea name="comentarios" rows="4"></textarea> </div> </label> <div class="actions"> <input onclick="javascript:valida_cadastro(); return false" type="submit" name="EnviarBt" value="Enviar" /> <input type="reset" name="Reset" value="Limpar" /> </div> </div> </div> </form> CSS: .container-form { display: flex; flex-direction: column; } .container-form label { display: inline-flex; justify-content: start; } .container-form label:not(.wrapper-message), .info-message { margin-bottom: 31px; } .container-form span{ min-width: 75px; } .container-form input { width: 100%; max-width: 401px; } .container-form textarea { width: 100%; } .container-form input[name='telefone'] { max-width: 131px; } .container-form input[name='ddd'] { max-width: 29px; } .container-form .span-center { align-items: center; display: flex; } .container-form .actions { display: inline-flex; max-width: 401px; justify-content: flex-start; margin-left: 75px; } .container-form .actions input { width: 48px; margin-right: 4px; } .container-form .container-textbox { max-width: 381px; width: 100%; } @media(max-width: 300px) { .container-form label { display: flex; flex-direction: column; } .container-form input, .container-form select { min-width: 100%; } } Segue o link com a demonstração do antigo e form alterado: JsBin: https://jsbin.com/sozasorusi/edit?html,css,output
  9. wanderval

    AJUDA! Alterar tamanho de div - CSS

    pelo inspect element, eu vejo que você tem uma class parent chamada 'grid-6' como o container principal é container -12 a div com a class='element-search' irá ocupar 6 colunas das 12 disponiveis. então não se trata de apenas centralizar o elemento mas sim manipular as classes de grid. eu tentaria colocar grid-4 nos 3 principais elementos filhos da div 'container-12' element-search grid-4 element-logo grid-4 element-shopping-card grid-4 eu aconselho você a ler um pouco sobre grid em css isso vai te ajudar a organizar o layout em um proximo problema
  10. wanderval

    Como programo um botão para inserir uma foto?

    É sim necessario codigo Javascript já que o que você está querendo é uma funcionalidade e não uma alteração na camada de apresentação, Html te proporcionam recursos para esse fim mais a manipulação desses dados é inpossivel ser feito sem código, acredito seu topico está na area errada do forum deveria ser em "Javascript afinal", em nenhuma parte da sua dúvida vi algo relacionado ao layout mas sim manipulação de dados. dá uma olhada nesse codigo: JsBin: https://jsbin.com/qoyucowuze/edit?html,css,js,output
  11. wanderval

    Ordenar imagens com o mouse

    Bom amigo essa div com a classe "container-drop" foi eu que coloquei e como o nome diz, ela serve para ser um container assim quando for manipular atravéz do javascript terá acesso a todos os filhos desse elemento. Essa div havia sido removida e o código não estava funcional. Sobre o atributo data-id, sim você pode usar um atributo foi utilizado o atributo "id" por ser esse meio que disponibilizou em seu HTML. O código está funcionando após eu retornar a div container, o ponto e que a ordem está sendo exibida apenas no console não em um elemento HTML. Eu criei um metodo que seta no Elemento HTML com o id "result", a lógica claramente não está clean pq isso vai depender do seu layout link jsbin: https://jsbin.com/datececeku/edit?html,css,js,output PS: só uma dica essa lógica foi somente adaptada a sua lógica inicial, mas hoje existe um problema quando é feito o drop em uma box cuja já esteja com um elemento img a mesma é substituida, isso acredito que tenha que ser validado no momento do drop verificando se o box já contém algum elemento de img!
  12. wanderval

    Ordenar imagens com o mouse

    fiz uma implementação usando essa logica link jsbin: https://jsbin.com/webiheqaro/edit?js,output
  13. wanderval

    Layout com coluna da direita fixa

    Isso vai depender da linguagem que você for utilizar, se for Angular por exemplo, você vai criar componentes de "menu"e vai ter rotas filhas
  14. wanderval

    ativar um componemte clicando em outro

    Fiz uma implementação jsbin link: https://jsbin.com/vajofesuri/edit?html,css,output
  15. wanderval

    carregando o tamanho da div com movimento

    Seria legal você colocar sua solução aqui para ajudar outros com a mesma dúvida, em todo caso deixo minha contribuição link jsbin: https://jsbin.com/votoponico/edit?html,css,output nesse exemplo foi usado a prorpiedade 'animation-fill-mode' com o valor 'forwards' fixando o estado final da animação animation-fill-mode: forwards;
×

Informação importante

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