Publicidade

AndersonWS

[Resolvido] Utilizar html dentro do javascript

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

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 Kellvin
      $(function(){ $("ul#Menu a").click(function(){ pagina = "index/"+$(this).attr('href') $("websites").load(pagina) return false; )} Alguem pode me dizer aonde que ta errado?
       
    • Por Samuel Arna
      Olá pessoal estou com uma dúvida, como eu poderia calcular 2 valores de select consultando o valor no db na mesma função do ajax, seria assim select1 = pedidos select2 = extras, fiz o seguinte até agora,
       
       
      pedidos.php
      <form action="p_novos.php" method="POST"> <div class="form-group col-md-3"> <label for="data_p">Data</label> <input type="date" class="form-control" id="data_pedido" name="data_pedido"> </div> <div class="form-group col-md-3"> <label for="servicos">Serviços</label> <select class="form-control" name="servicos" id="servicos" onchange="valorPedidos(this.value)"> <option value="Formatação Simples">Formatação Simples</option> <option value="Formatação com Backup">Formatação com Backup</option> <option value="Recuperação de Pendrive">Recuperação de Pendrive</option> <option value="Recuperação de HD">Recuperação de HD</option> </select> </div> <div class="form-group col-md-3" > <label for="rec">Recuperação de Dados</label> <select class="form-control" name="recDados" onchange="valorExtra(this.value)"> <option value="0">Sem Recuperação de Dados</option> <option value="REC - 2GB">REC - 2GB</option> <option value="REC - 8GB">REC - 8GB</option> <option value="REC - 16GB">REC - 16GB</option> <option value="REC - 16GB+">REC - 16GB+</option> </select> </div> <div id="valor"></div> <div class="form-group col-md-9"> <label for="obs">Observações</label> <textarea class="form-control" name="obs" id="" cols="30" rows="10"></textarea> <br> <div class="form-group col-md-3"> <input type="text" id="nomep" name="nomep" value=""> <input type="submit" class="form-control" value="Fazer Pedido" > </div> </div> </form> <script> function valorPedidos(str) { if (str == "") { document.getElementById("valor").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("valor").innerHTML = this.responseText; } }; xmlhttp.open("GET","v_pedido.php?q="+str,true); xmlhttp.send(); } } </script> <script> function valorExtra(str) { if (str == "") { document.getElementById("valor").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("valor").innerHTML = this.responseText; } }; xmlhttp.open("GET","v_pedido.php?e="+str,true); xmlhttp.send(); } } </script> v_pedido.php
      <?php include 'conecta.php'; $e = strval($_GET['e']); $q = strval($_GET['q']); if ($q > 0) { $sql = "SELECT * FROM tab_precos WHERE pedido = '".$q."'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0){ // output data of each row while($row = mysqli_fetch_assoc($result)) { $valor1 = intval($row['valor']); $valor2 = intval($row['extra']); ?> <input class="input" type="text" value="<?php echo $valor1+$valor2 ?>" name="valor"> <?php } } else { echo "0 results"; } } if ($e > 0) { $sql = "SELECT * FROM tab_precos WHERE pedido = '".$e."'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0){ // output data of each row while($row = mysqli_fetch_assoc($result)) { $valor1 = intval($row['valor']); $valor2 = intval($row['extra']); ?> <input class="input" type="text" value="<?php echo $valor1+$valor2 ?>" name="valor"> <?php } } else { echo "0 results"; } } mysqli_close($conn); ?> porém quando seleciono um select o outro recebe valor nulo, exemplo, select de servicos recebe $q logo retorna o valor do select extra ($e = 0), como eu poderia fazer para eles somarem os valores no input da div valor ? 
    • Por Renato Assis
      O que era para ser uma tarefa fácil virou uma dor de cabeça.. ( não sei se é porque estou com fome xD )
       
      Bom estou montando um script semelhante ao do Adfly para aguardar 5 segundos para continuar.. estou indo bem.. o problema agora é que a DIV que deveria separar o conteúdo do header  não me ajuda.. nesse link já programado vai ver o que ocorre: https://jsfiddle.net/jvaqcmvs/
    • Por mbmesquita
      Boa tarde, vou direto ao ponto
      Tenho um select com alguns options e preciso que esses options sejam liberados a partir do momento que o valor de uma <td> de uma tabela da página tenha um respectivo valor.
       
      Exemplo: o valor que está na <td> é 15, assim vai liberar os options até o valor 15. só que esses valores da <td> estão vindo do banco de dados em um comando php.
       
      Tem possibilidade de fazer isso? se sim, como?
    • Por AndréJs
      Galera eu tenho 2 campos de texto e um botão, quando o usuario clika em loga sem preencher os campos de textos ele volte e não vá para a próxima página como faço isso já tentei várias vezes.
       
      Html
      <div class="entrar">
         <input type="text" placeholder="Coloque aki o nome" id="entrar" style="height:25px;">
        </div>
        <div class="senhas">
         <h4>Senha</h4>
        </div>
        <div class="senha">
         <input type="password" placeholder="Coloque aki a Senha" id="senha" style="height:25px;">
        </div>
        <div class="butao">
        <a href="index.html pagina iniciar"> <input type="button" onclick="botao()" value="Logar" style="background-color:#6495ED; height:25px; width:39px;" id="botao"></a>
        </div>
       
      Javascript
      <script>
      function botao() {
       if(document.getElementById('entrar').value == "" || document.getElementById('senha').value == "") {
       alert("Preencha os campos restantes");
       return false;
       } 
      }
      </script>