Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.

carcleo

Membros Plenos
  • Total de itens

    117
  • Registro em

  • Última visita

  • Qualificações

    0%

Reputação

10

Sobre carcleo

  • Data de Nascimento 20-12-1970 (47 anos)

Informações gerais

  • Cidade e Estado
    Muriáé-MG
  • Sexo
    Masculino
  1. Ainda não consegui, se alguém souber como agradeço!
  2. Entendi. Mas, por favor, faz um teste aí. Sem alterar o css, Remova 1 ou 2 imagens e vê o que acontece no final da animação. Agora faça o contrario: adicione mais 2 imagens e vê o que ocorre. Entendeu agora porque estou fazendo isso? Então, Por favor, consegui fazer json porque ví nas pesquisas que o <style> aceita json, mas agora estou com outro problema: O objeto json, imprimiu assim no log (8) ["0% { margin-left:-0%}", "25% { margin-left:-0%}", "30% { margin-left:-100%}", "50% { margin-left:-100%}", "55% { margin-left:-200%}", "75% { margin-left:-200%}", "80% { margin-left:-300%}", "100% { margin-left:-300%}"] 0 : "0% { margin-left:-0%}" 1 : "25% { margin-left:-0%}" 2 : "30% { margin-left:-100%}" 3 : "50% { margin-left:-100%}" 4 : "55% { margin-left:-200%}" 5 : "75% { margin-left:-200%}" 6 : "80% { margin-left:-300%}" 7 : "100% { margin-left:-300%}" length : 8 __proto__ : Array(0) Agora os problemas são os seguintes e são 2: Preciso lançar esse resultado como parâmetro e conheço duas formas de fazê-lo; A) $.keyframe.define([{ name: 'tocaSlide', // Quando adiciono definicaoCSS aqui dá erro no script }]); $("body").css("@keyframe tocaSlide", function() { // Quando adiciono definicaoCSS aqui NÃO dá erro no script, mas o keyframe não recebe o style }); O que faço agora? Veja o js completo: $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; var imagem = ""; var imagem2 = ""; for (i = 0; i < quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; imagem += tMin + "% { margin-left:-" + tempoImagens + "%},"; imagem += tMax + "% { margin-left:-" + tempoImagens + "%},"; imagem2 += "'" + tMin + "'% { 'margin-left':'-" + tempoImagens + "%'},"; imagem2 += "'" + tMax + "'% { 'margin-left':'-" + tempoImagens + "%'},"; tempoImagens+=100; } var slide = {}; var trechos = imagem.slice(0, -1).split(','); var trechos2 = imagem2.slice(0, -1).split(','); slide[trechos2]; //console.log(trechos); $.keyframe.define([{ name: 'tocaSlide', slide }]); $("<style> @keyframes tocaSlide").html(trechos); $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); });
  3. Preciso criar um criar objeto json a partir de várias strings separadas por vígula. Mas tem um inconveniente: dentro dessas strings, em todas elas, existem também misturadas na string os caracteres '{' e' }'. Então o objeto ficar por exemplo dessa forma: var objJson = {'primeiro{}objeto','segundo{}objeto', "etc.."}. Alguma forma de contornar esse problema?
  4. Se por acaso, as imagens forem reduzidas de 4 para 3, a nova variável texto ficará assim: texto = "'0%' : { 'margin-left':'-0%'},"; texto += "'33%' : { 'margin-left':'-0%'},"; texto += "'38%' : { 'margin-left':'-100%'},"; texto += "'66%' :{ 'margin-left':'-100%'},"; texto += "'71%' : { 'margin-left':'-200%'},"; texto += "'100%' : { 'margin-left':'-200%'},";; Percebe como mudam as porcentagens em relação às mudanças no número de imagens?
  5. Veja a situação: Como te falei, estou tentando de 2 formas: O CSS e HTML de ambas é a mesma, o que muda é só o JS CSS * { margin:0; padding:0; boder: none; } body { width:1000px; margin: auto; } div.slider { width:100%; overflow:hidden; } div.slider ul.slide { width:400.5%; animation:tocaSlide infinite; } div.slider ul.slide li { width:100%; list-style:none; } div.slider ul.slide li img { float:left; } @keyframes tocaSlide {} HTML <div class="slider"> <ul class="slide"> <li><img src="_imgs/_slideShow/1.png" /></li> <li><img src="_imgs/_slideShow/2.png" /></li> <li><img src="_imgs/_slideShow/3.png" /></li> <li><img src="_imgs/_slideShow/4.png" /></li> </ul> </div> jScript 1 $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; var imagem = []; for (i = 0; i < quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; imagem[i] = []; imagem[i].push(tMin + "% { margin-left:-" + tempoImagens + "%};"); imagem[i].push(tMax + "% { margin-left:-" + tempoImagens + "%};"); tempoImagens+=100; } texto = ""; for (po=0; po<imagem.length; po++) { texto += imagem[po][0]+imagem[po][1]; } //document.write(texto); $("<style> @keyframes tocaSlide").html(texto); $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); jScript 2 $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 10; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; var supportedFlag = $.keyframe.isSupported(); var texto = ""; for (i = 0; i < quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; texto+= tMin + '% : { margin-left:-' + tempoImagens + '% },'; texto+= tMax + '% : { margin-left:-' + tempoImagens + '% },'; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; tempoImagens+=100; } /*variavel texto gerada dinamicamente dentro do laço for acima*/ /* texto = "'0%' : { 'margin-left':'-0%'},"; texto += "'25%' : { 'margin-left':'-0%'},"; texto += "'30%' : { 'margin-left':'-100%'},"; texto += "'50%' :{ 'margin-left':'-100%'},"; texto += "'55%' : { 'margin-left':'-200%'},"; texto += "'75%' : { 'margin-left':'-200%'},"; texto += "'80%' : { 'margin-left':'-300%'},"; texto += "'100%' : { 'margin-left':'-300%'}"; */ $.keyframe.define([{ name: 'tocaSlide', content: texto }]); $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); Imagine se adicionasse ou removesse alguma imagem no html?
  6. Então, precisa sim. Pois essa variável com os css's a inserir no keyframe, é gerada em um loop que dependerá do número de imagens que serão inseridas no slide. Entendeu a necessidade?
  7. como eu consigo fazer isso? Tenho o seguinte código com o objetivo de adicionar propriedades ao `@keyframe tocaSlide` $("<style> @keyframes tocaSlide").html(texto); A variável texto tem o seguinte conteúdo '0%' : { 'margin-left':'-0%'}, '25%' : { 'margin-left':'-0%'}, '30%' : { 'margin-left':'-100%'}, '50%' :{ 'margin-left':'-100%'}, '55%' : { 'margin-left':'-200%'}, '75%' : { 'margin-left':'-200%'}, '80%' : { 'margin-left':'-300%'}, '100%' : { 'margin-left':'-300%'} ficou assim: texto = "'0%' : { 'margin-left':'-0%'},"; texto += "'25%' : { 'margin-left':'-0%'},"; texto += "'30%' : { 'margin-left':'-100%'},"; texto += "'50%' :{ 'margin-left':'-100%'},"; texto += "'55%' : { 'margin-left':'-200%'},"; texto += "'75%' : { 'margin-left':'-200%'},"; texto += "'80%' : { 'margin-left':'-300%'},"; texto += "'100%' : { 'margin-left':'-300%'}"; Nenhum erro no console mas o @keyframe não está recebendo o html Também tentei com: var supportedFlag = $.keyframe.isSupported(); $.keyframe.define([{ name: 'tocaSlide', texto }]); Mas também não funcionou. e uma nova tentativa: $("div.slider ul.slide").playKeyframe( texto ); Também não funcionou. Alguém pode me ajudar
  8. Sim, mas eu não gostaria de usar jQuery validator nesse projeto. Alguma implicação grave em continuar assim?
  9. Então, eu já havia tentado assim antes, mas o campo associado é required, e, com visibilidade nula (visibility:hidden;), por incrível que pareça, está impossibilitando o validator do html5 de encontrar o input. Então assim o validator do html5 pula a validação para o próximo campo do formulário.
  10. Tem jeito sim, consegui: opacity:0; Muito obrigado pelo código que abriu a minha mente.
  11. Então, adequei teu código ao meu e ficou assim: * { margin: 0; padding: 0; } body { margin: 0 auto; width: 1000px; } .pagamento-metodos { list-style: none; display: block; border: rgb(222,222,222) 1px solid; width: 500px; height: 120px; } .pagamento-metodos .pagamento-metodo { position: relative; border: rgb(222,222,222) 1px solid; box-sizing: border-box; float: left; width: 130px; height: 80px; margin-top: 19px; } .pagamento-metodos > .pagamento-metodo { margin-left: 25px; } .pagamento-metodos .pagamento-metodo + .pagamento-metodo { margin-left: 25px; } .pagamento-metodos .pagamento-metodo label { position: absolute; display: block; cursor: pointer; font-size: 0; bottom: 1px; left: 1px; right: 1px; top: 1px; } .pagamento-metodos .pagamento-metodo label:after { content: ""; clear: both; } .pagamento-metodos .pagamento-metodo input[type=radio] { position:absolute; left:5px; top: 5px; } .pagamento-metodos .pagamento-metodo input[type=radio]:focus + label { outline: 2px dotted #21b4d0; } .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label { outline: 4px solid #21b4d0; } .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label:after { display: inline-block; position: absolute; width: 20px; height: 20px; right: 0; bottom: 0; background: url(_imgs/checked.png) center; background-size: cover; } .pagamento-metodos .pagseguro label { background: url(_imgs/pagSeguro.png) center; background-size: cover; } .pagamento-metodos .paypal label { background: url(_imgs/payPal.png) center; background-size: cover; } .pagamento-metodos .boleto label { background: url(_imgs/boleto.png) center; background-size: cover; } <form action="#" method="post"> <ul class="pagamento-metodos"> <li class="pagamento-metodo paypal"> <input name="payment_methods" class="pagamento" type="radio" id="paypal" value="paypal" required/> <label for="paypal">PayPal</label> </li> <li class="pagamento-metodo pagseguro"> <input name="payment_methods" class="pagamento" type="radio" id="pagseguro" value="pagseguro"/> <label for="pagseguro">PagSeguro</label> </li> <li class="pagamento-metodo boleto"> <input name="payment_methods" class="pagamento" type="radio" id="boleto" value="boleto_bancario"/> <label for="boleto">Boleto</label> </li> </ul> <br /> <input type="submit" value="testar" class="btn" /> </form> Mas, vendo a imagem abaixo, dá para notar que o radio button está aparecendo uma pontinha dele no canto superior esquerdo das li's Como suprimir essa falha?
  12. Valeu, era isso mesmo que eu precisava. Vou adaptar aqui ao meu código para sempre ter.
  13. Valeu, obrigado pela explicação detalhada. Aproveitando o tópico e não saindo muito do assunto, Quando fazemos visibility:hidden e precisamos ocupar o espaço de digamos desta vez, um radio button com seu label correspondente, fazemos width e height = 0. Mas quando fazemos require, pelo fato das dimensões serem 0, o aviso do require não aparece e passa ao próximo campo do formulário. Alguma forma de contornar esse problema?
  14. Como ficaria em JavaScript? Ou ainda fazer o require do HTML funcionar com o input com display:none?
  15. Pessoal, estou com uma situação muito difícil e gostaria da ajuda de vocês: Tenho 3 rádio buttons que guardam opções de cartão para pagamento para o cliente escolher. No entanto, para não apresentar apenas os rádio buttons ao navegante do site, escondi os radio buttons com display:none e coloquei um botão bonito no lugar para ser marcado de forma tal que ao clicar nesse botão, que é feito através de um label, o rádio button também é marcado. Mas como é um formulário, gostaria de validar, preferencialmente com css, se alguma opção foi selecionada, caso contrario, forçar o require do html. <ul class="pagamento-metodos"> <li class="pagamento-metodo paypal"> <input name="payment_methods" type="radio" id="paypal" value="paypal" required> <label for="paypal"></label> </li> <li class="pagamento-metodo pagseguro"> <input name="payment_methods" type="radio" id="pagseguro" value="pagseguro"> <label for="pagseguro"></label> </li> <li class="pagamento-metodo boleto"> <input name="payment_methods" type="radio" id="boleto" value="boleto"> <label for="boleto"></label> </li> </ul> Quando submeto o formulário, e não seleciono nenhuma opção de pagamento, o require não funciona porque o o input está com display:none e a validação passa para o próximo campo. input[type=radio] { display:none; } .pagamento-metodos { width: 500px; height: 120px; text-align: center; border: rgb(222,222,222) 1px solid; } .pagamento-metodos .pagamento-metodo { display: inline-block; } .pagamento-metodo + .pagamento-metodo { margin-left: 25px; margin-top: 19px; } .pagamento-metodos .pagamento-metodo label { position: relative; display: block; width: 130px; height: 80px; border: rgb(222,222,222) 1px solid; cursor:pointer; } .pagamento-metodos .pagamento-metodo label:after { display: none; content: ""; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: url(../_imgs/checked.png) no-repeat center; } .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label { outline: rgb(33,180,208) 4px solid; } .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label:after { display: block; } .pagamento-metodos .paypal label { background: url(../_imgs/payPal.png) no-repeat center; } .pagamento-metodos .pagseguro label { background: url(../_imgs/pagSeguro.png) no-repeat center; } .pagamento-metodos .boleto label { background: url(../_imgs/boleto.png) no-repeat center; } Algum recurso?

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×