Publicidade

AndersonWS

[Resolvido] Utilizar html dentro do javascript

Patrocínio:

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?

 

0

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

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?

 

0

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?

0

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.

0

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 lUANZIKA3
      Olá, alguem poderia me ajudar? não estou conseguindo alinhar este botão
       
      .classname {
          -moz-box-shadow:inset 0px -4px 0px -1px #dcecfb;
          -webkit-box-shadow:inset 0px -4px 0px -1px #dcecfb;
          box-shadow:inset 0px -4px 0px -1px #dcecfb;
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
          background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
          background-color:#bddbfa;
          -webkit-border-top-left-radius:0px;
          -moz-border-radius-topleft:0px;
          border-top-left-radius:0px;
          -webkit-border-top-right-radius:0px;
          -moz-border-radius-topright:0px;
          border-top-right-radius:0px;
          -webkit-border-bottom-right-radius:0px;
          -moz-border-radius-bottomright:0px;
          border-bottom-right-radius:0px;
          -webkit-border-bottom-left-radius:0px;
          -moz-border-radius-bottomleft:0px;
          border-bottom-left-radius:0px;
          text-indent:0;
          display:inline-block;
          color:#ffffff;
          font-family:Arial;
          font-size:17px;
          font-weight:bold;
          font-style:normal;
          height:45px;
          line-height:45px;
          width:99px;
          text-decoration:none;
          text-align:center;
          text-shadow:1px 1px 0px #528ecc;
      }
      .classname:hover {
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
          background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
          background-color:#80b5ea;
      }.classname:active {
          position:relative;
          top:1px;
    • Por jvboliveira
      Pessoal não estou entendendo esse trecho de código. Alguém pode me ajudar
       
      if(peca[x][y]['peca']=='peao'){
              if(peca[x][y]['cor']=="branco"){
                  if(!peca[x-1][y]['peca']){
                      possivel(x-1,y);
                  }if(y-1>0 && peca[x-1][y-1]['peca']){
                      possivel(x-1,y-1);
                  }
                  if(y+1<9 && peca[x-1][y+1]['peca']){
                      possivel(x-1,y+1);
                  }
                  if(x==7){
                      if(!peca[x-2][y]['peca'] && !peca[x-1][y]['peca']){
                          possivel(x-2,y);
                      }
                  }
              }

    • Por leonardo23costa
      Bom dia.
      Tenho um script que funciona normalmente no browser do celular e no browser do computador, porém quando gero um apk ele salva um arquivo com outra extensão ao invés da proposta.
      Segue abaixo o meu script:
       
      $("#download").click(function() { html2canvas($("#layout"), { onrendered: function(canvas) { var a = document.createElement('a'); a.href = canvas.toDataURL("image/jpeg", 1.0); a.download = 'sou-enfermagem.jpeg'; a.click(); } }); }); Só preciso que essa imagem seja salva na pasta download do android. O que eu preciso alterar neste script para que funcione no android?
      Obrigado.
    • Por IanLuan
      Estou tendo dificuldades para criar uma transição na criação de bordas no css3. Quero que ao passar o mouse, crie a borda lentamente, mas mesmo usando a transição a borda é criada instantaneamente. Queria saber como faz aquele efeito para o traço da da borda caminhe de uma ponta a outra até fechar o quadrado, em x segundos. Mas a transição não faz nada com a borda...
      h1 a:hover { border: 1px solid black; transition: 2s; } não tem jeito para aplicar a transição na criação da borda? 
    • Por rodrigofv1994
      Meu editor Brackets está sem a função de sugerir o código que é digitado, não sei o nome desta função. Parou de funcionar do nada, estava de boa e do nada sem eu alterar nenhuma configuração ele deixou de funcionar. Exemplo: começamos a digitar background e o editor já mostra várias opções que podem ser usadas com o background. Alguém sabe como posso resolver isso?