Ir para conteúdo
    • João Batista Neto

      iMasters InterCon 2017   10-10-2017

      Ainda dá tempo de se inscrever no iMasters InterCon 2017, o maior evento dev do Brasil!  
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 luizmtz
      Amigos,

      Estou com uma dificuldade de imprimir em uma impressora ESC/POS via bluetooth. 

      Tentando imprimir normalmente, já com a impressora pareada, ela não aparece na listagem.
       
    • Por marcelocardoso
      Galera...

      A nível de conhecimento, qual seria o modo certo de não guardar nada no cache das aplicações:
      Tipo: Cada vez que o site fosse carregado, não trazer a ultima atualização do cache, mas sempre fazer o navegador carregar a cada refresh, uma versão nova do código...

      Como fazer em ASP?
      Como fazer em HTML?

      Volte e meia enfrento problemas com isso, CHROME e demais navegadores?
      Hora funciona, depois limpo o cache não funciona mais, aí não se sabe quando se está certo, ou não...
    • Por uninerds
      Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
      Segue o link da playlist com 8 vídeos de HTML5
      https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd
       
      1 - O que é HTML, CSS e JavaScript?
      Neste vídeo é explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas necessários
      Neste vídeo é mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Tutorial de HTML5 - #01 - Primeiro HTML5
      Neste vídeo começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código
       
      4 - Tutorial de HTML5 - #02 - Hierarquia de títulos e linha horizontal
      Neste vídeo é explicado como fazer hierarquia de títulos e colocar linha horizontal
      Tags: h1 até h6 e hr
       
      5 - Tutorial de HTML5 - #03 - Parágrafo, quebra de linha e texto pré-formatado
      Neste vídeo é explicado como fazer parágrafo, quebra de linha e texto pré-formatado
      Tags: p, br e pre
       
      6 - Tutorial de HTML5 - #04 - Formatação de texto
      Neste vídeo é explicado como fazer formatação de texto
      Tags: b, strong, i, em, mark, small, sub, sup, ins e del
      Atributos: cite e datetime das tags ins e del
       
      7 - Tutorial de HTML5 - #05 - Citações
      Neste vídeo é explicado como fazer citações
      Tags: q, blockquote, cite, address, abbr e bdo
      Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote
       
      8 - Tutorial de HTML5 - #06 - Comentários e comentários condicionais
      Neste vídeo é explicado como fazer comentário e para que serve
       
      Segue o link da playlist com 3 vídeos de CSS
      https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj
       
      1 - O que é HTML, CSS e JavaScript?
      Neste vídeo é explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas necessários
      Neste vídeo é mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Tutorial de CSS - #01 - Primeiro CSS
      Neste vídeo é mostrado como fazer a integração entre HTML e CSS
       
      PS:
      - Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda
      - Sempre que fizermos vídeo novo atualizaremos este tópico
    • Por viniciussmelo
      Eu sei que existe um comando que se coloca no body, e quando o usário clica na seta para voltar, ele faz com que o usuário retorne de volta para frente(como se estivesse apertando na seta para ir para frente), mas não sei a sintaxe dele.
      Era algo assim
      <body history.go(-1)>
×

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: