Ir para conteúdo
AndersonWS

[Resolvido] Utilizar html dentro do javascript

Recommended Posts

Amigos encontrei esse script aqui em http://jsfiddle.net/utluiz/yR2ac/

Ele muda o texto de tempo em tempo, segue o código:

<div id="frases"></div>

<script>
$(document).ready(function(){
    var textos = ["texto 1", "texto 2", "texto 3"];
    var atual = 0;
    $('#frases').text(textos[atual++]);
    setInterval(function() {
        $('#frases').fadeOut(function() {
            if (atual >= textos.length) atual = 0;
            $('#frases').text(textos[atual++]).fadeIn();
        });
    }, 3000);
});
</script>

O problema é que não sei como colocar html dentro destes textos, exemplo:

var textos = ["<h1> Acumule pontos e ganhe descontos! </h1><a href=''> 
  <input type='submit' name='cad' value='Cadastre-se gratuitamente' /> </a>", "texto 3"];

O problema é que mostra assim:
<h1> Acumule pontos e ganhe descontos! </h1><a href=''>
  <input type='submit' name='cad' value='Cadastre-se gratuitamente' /> </a>

 

O que eu preciso é mostrar um título e um botão mesmo.

Como fazer?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta isso aqui, ao invés de usar o ".text()", use o ".html()"

$(document).ready(function(){
    var textos = ["texto <b>1</b>", "texto <b>2</b>", "texto <b>3</b>"];
    var atual = 0;
    $('#frases').html(textos[atual++]);
    setInterval(function() {
        $('#frases').fadeOut(function() {
            if (atual >= textos.length) atual = 0;
            $('#frases').html(textos[atual++]).fadeIn();
        });
    }, 3000);
});

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Funcionou certinho Pita!

Desta forma mostra formatadinho.

Se não for pedir muito mas ficou muito extenso o texto.

Como eu poderia dar quebra de linha no script?

Está assim:

<div class='circleSlider'><span class='to-tag'> até </span><span class='price'> - 20 </span><span class='half-size'> % </span><span class='dt-tag'> de desconto </span></div><h3> Cadastre-se em nosso e receba em seu e-mail <br/> promoções e descontos especiais. </h3><h1> Cadastre seu e-mail e ganhe descontos! </h1><a href=''> <input type='submit' class='sRed' name='ofertas' value='Veja nossas ofertas' /> </a>

E gostaria se der que ficasse assim:

<div class='circleSlider'>
  <span class='to-tag'> até </span>
  <span class='price'> - 20 </span>
  <span class='half-size'> % </span>
  <span class='dt-tag'> de desconto </span>
</div>
<h3> Cadastre-se em nosso e receba em seu e-mail <br/> promoções e descontos especiais. </h3>
<h1> Cadastre seu e-mail e ganhe descontos! </h1>
<a href=''> <input type='submit' class='sRed' name='ofertas' value='Veja nossas ofertas' /> </a>

Sugestão?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode usar a concatenação do JS com o `+`, mas você está falando que o código ficou extenso no navegador ou no IDE?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 17/02/2017 at 20:16, KhaosDoctor disse:

Você pode usar a concatenação do JS com o `+`, mas você está falando que o código ficou extenso no navegador ou no IDE?

Muito extenso no IDE mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Próximos Eventos

  • Conteúdo Similar

    • Por Jesse&Francinete
      Olá pessoas, por incrível que pareça, mesmo eu verificando se o elemento existe, me diz isso:
       

       
      Mas quando clico no botão:
       
      <button type="button" class="btn btn-primary" onclick="validateForm()">Confirmar <span class="glyphicon glyphicon-ok"></span> </button> Ele só valida a de cima "ADMCORP", se no meu form tiver apenas "AMBIENTAL" ele não verifica, mas se tiver "ADMCORP" ele verifica, o que pode ser?
    • Por Jesse&Francinete
      Olá pessoas, por incrível que pareça, mesmo eu verificando se o elemento existe, me diz isso:
       

       
      Mas quando clico no botão:
       
      <button type="button" class="btn btn-primary" onclick="validateForm()">Confirmar <span class="glyphicon glyphicon-ok"></span> </button> Ele só valida a de cima "ADMCORP", se no meu form tiver apenas "AMBIENTAL" ele não verifica, mas se tiver "ADMCORP" ele verifica, o que pode ser?
    • Por Bergs
      Olá,
       
      Estou com uma dúvida, como retirar a cor azul do numero do telefone quando visto pelo navegador do celular?
      Essa cor não é a que foi configurada no CSS. ex: Lá no rodapé do site tem um endereço e telefone com a cor #FFF (branca) mas pelo celular o texto do telefone ta ficando azul.
       
    • Por Csilvestre
      Oi Galera,
      Eu estou desenvolvendo um site para um novo projeto meu e queria colocar um efeito de fade-in em algumas partes dele para carregar conforme o usuário for descendo o site, eu nunca fiz isso em um site e até vi uns tutoriais na internet e tentei aplica-lós no site, o problema é que ele é em wordpress dai tentei ir editando pelo editor e não funcionou e acabou bugando muita coisa no site, por sorte eu tinha backup.
      O Site é http://improvecuritiba.com.br/ e eu queria colocar fade nessas partes:


       
      Já tentei diversas vezes e de diversos modos mas sem sucesso, alguém já fez isso em site wordpress e se sim como?
      Obrigado desde já!
    • Por thiagosantana
      Acho que o forum não é pra isso, mas  quem precisar de uma vaga na área
       
       
      Analista desenvolvedor Java pleno (vila olimpia)
      Vaga efetiva PJ
      Buscamos profissionais que queiram crescer na carreira, que saiba trabalhar em equipe, que tenha perfil de liderança, solida experiência com java, boa comunicação,  bom planejamento e execução sem supervisão,  com disponibilidade de horarios e também para viagens.
      Requisitos:
      Java7
      Rest
      Spring framework
      Tomcat com deloy de aplicações 
      Git (versionamento, branchs) integrado ap fluxo de desenvolvimento,  ambientes e projetos.
      Experiência anterior com linux.
      Interessados enviar cv com pretensão para Sandra@slie.com.br
       
       
       
      [20:52, 18/10/2017] Ju Cel: nalista Java Sênior e 
      Analista Java Pleno
      Empresa localizada na região da Av. Faria Lima, em São Paulo, oferece CLT Full, salário super atrativo e benefícios;

      Requisitos:
      domínio de java, 
      maven, 
      jenkins, 
      docker, 
      spring boot, 
      react, 
      angular, 
      sass, css, 
      node js, 
      shell scripint, 
      rubi on rails (desejável) 
      amazon ws;
      conhecimento de gerenciamento de ciclo de vida de software;
      experiência de multiprocessamento;
      desejável arquitetura para sistemas de alta complexidade;
      inglês fluente (vai utilizar);
      perfil arrojado, inovador, comprometido, comunicativo, ótimo relacionamento interpessoal, responsável ao nível de execução sem supervisão;
      perfil analítico, com disponibilidade para viagens curtas e para horário flexível.
      E interessados enviar cv com pretensão para Sandra@slie.com.br
      [20:52, 18/10/2017] Ju Cel: Essa é de java
      [20:52, 18/10/2017] Ju Cel: Tem de front end tbem
      [20:55, 18/10/2017] Ju Cel: Analista desenvolvedor front end
      Para empresa localizada na vila olimpia, próximo ao shopping
      Requisitos:
      Domínio de HTML, CSS, JavaScript, Bootstrap, jQuery.
      Desejável: angular.
      Diferencial: LESS, SASS,  BOWER.
      A vaga é por PJ, prazo indeterminado.
      interessados enviar cv com pretensão para:
       sandra@slie.com.br.
       
       
       
       
       
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: