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 sumoner80
      Olá, primeiramente um boa noite. sou novo aqui no forum e busco solução pra um problema que faz 1 semana que estou quebrando a cabeça para resolver. então vamos lá
       
      tenho esse lightbox
      HTML eu especifiquei o html só nos lightbox mesmo para não ficar muito grade o tópico.
      <div class="bgrid"> <h3 style="text-align:center;">Intelbrás AMT 2018</h3> <p style="text-align:center;">Click para abrir a imagem</p> <div class="row"> <div class="column"> <img src="servi/alarme/imodelo.png" width="200" height="100" onclick="openModal();currentSlide(1)" class="hover-shadow cursor center"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="servi/alarme/a.png" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="servi/alarme/b.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="servi/alarme/c.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="servi/alarme/d.jpg" style="width:100%;height:50%;"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/a.png" style="width:100%" onclick="currentSlide(1)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/b.jpg" style="width:100%" onclick="currentSlide(2)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/c.jpg" style="width:100%" onclick="currentSlide(3)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/d.jpg" style="width:100%" onclick="currentSlide(4)" alt=""> </div> </div> </div> <div class="service-content"> <p>discrição...</p> </div> </div> <!-- end bgrid --> <div class="bgrid"> <h3 style="text-align:center;">Central Elite 06 zonas</h3> <p style="text-align:center;">Click para abrir a imagem</p> <div class="row"> <div class="column"> <img src="servi/alarme/emodelo.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor center"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="servi/alarme/aa.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="servi/alarme/bb.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="servi/alarme/cc.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="servi/alarme/dd.jpg" style="width:100%;height:50%;"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/aa.jpg" style="width:100%" onclick="currentSlide(1)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/bb.jpg" style="width:100%" onclick="currentSlide(2)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/cc.jpg" style="width:100%" onclick="currentSlide(3)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="images/alarme/dd.jpg" style="width:100%" onclick="currentSlide(4)" alt="Central de Alarme Elite 6 zonas"> </div> </div> <div class="service-content"> <p>Discrição...</p> </div> </div> <!-- end bgrid --> CSS
      /*algumas config adicionais de style das páginas */ img.center { position: relative; top: 0; left: 90px; } body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 0px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 50%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 500px; } /* The Close Button */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .Slides { display: none; } .cursor { cursor: pointer } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: black; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #000000; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) } JavaScript
      function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } O que acontece. tenho numa mesma página esses 2 lightbox só que o problema é um seguinte quando click no segundo lightbox abre as imagens do primeiro como se só tivesse 1 lightbox
      e eu gostaria que fossem individual pelo fato de ser produtos diferentes... posso estar enganado mais creio eu que pode ser os IDs mais de qualquer forma se alguém poder me ajudar Ficarei muito grato e também isso server para compartilhar também esse Ligthbox de imagem pra quem necessita. Novamente muito obrigado aguardo respostas
      E se precisar posso estar mandando um print do que está acontecendo.
    • Por x86bra
      Pessoal, bom dia.
      Estou tendo certa dificuldade em manipular informações entre javascript e PHP. Tenho duas páginas, uma com um textbox e um submit e outra escrita em php onde faço conexão com o mysql e tento dar o insert, só que quando vou ver no banco, a tabela está em branco (não NULL, um espaço em branco tipo " ").
       
      Esta é a primeira página, onde tem os campos e o script:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> </head> <input type="text" name="codigo" id="codigo" /> <input type="button" name="btn" id="btn" value="Submit" onclick="tst()" /> <script> function tst(){ var info={code: $('#codigo').val()}; $.post({ url: "testejquery.php", dataType:"text", data: info, success: function() { window.open('testejquery.php'); } }); console.log(info); } </script> <body> </body> </html> No console eu consigo ver que a variável foi preenchida corretamente.
       
      Aqui a segunda página:
      <?php mysql_connect("localhost:3306", "root", "") or die(mysql_error()); mysql_select_db("teste") or die(mysql_error()); error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED); $dado = (isset( $_POST['muge'])); $sql = "INSERT INTO test (coisa) VALUES ('$coisa')"; $result = mysql_query($sql) or die(mysql_error()); ?> O insert até que funciona, porém coloca tudo em branco no BD, como se não estivesse recebendo a informação da primeira pagina 
      Alguém pode me dar uma luz?
    • Por AndersonWS
      Tenho um código que adaptei daqui mesmo do fórum para adicionar campos dinâmicos. 
      Meu problema é que ao adicionar um campo "select" que usa o "selectpicker bootstrap" ele não funciona.
      Não sei se é um problema de javascript ou de css então me desculpem se postei no local errado.
      Segue o código:
      //<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> function mais_vinculos(){ var quantidade = $('.vinculo').size(); var div_qnt = parseInt(quantidade)+1; $('.mostrando_vinculos').append('<div class="form-group vinculo vinc'+div_qnt+'">\ <label class="col-md-9 control-label"><h4>Vinculo '+div_qnt+'</h4>\ <div class="form-group">\ <select name="vinculo[]" class="form-control selectpicker" data-live-search="true" title="Selecione vinculo...">\ <option value="1">Vinculo 1</option>\ <option value="2">Vinculo 2</option>\ <option value="3">Vinculo 3</option>\ <option value="4">Vinculo 4</option>\ <option value="5">Vinculo 5</option>\ </select>\ </div>\ <div class="form-group">\ <input name="nome[]" placeholder="Digite o nome..." class="form-control input-md" type="text"/>\ </div>\ </label>\ <div class="col-md-3">\ <a href="javascript: menos_vinculos(\'vinc'+div_qnt+'\')" class="btn btn-info pull-right">X</a>\ </div>\ </div><br/>\ '); } function menos_vinculos(classe){ $("."+classe).remove(); } <div class="mostrando_vinculos col-md-12"> </div> <div class="col-md-12"> <a href="javascript: mais_vinculos();" style="width:100%;" class="btn btn-md btn-default"> Adicionar vinculos </a> </div> O campo "input" aparece normal porém o select não é mostrado
      A classe fica assim:
      select.bs-select-hidden, select.selectpicker { display: none !important; } Mas se eu mudar ela o selectpicker bootstrap não funciona e aparece um select normal.
      O que eu posso fazer para resolver isso?
      Preciso usar o selectpicker bootstrap pois irão ter muitos resultados e a busca do selectpicker bootstrap facilita para meu caso.
       
      *Caso seja um CSS ou PHP e não javascript favor mover o tópico.
       
      Grato.
    • Por Kah.Pirola
      Olá! Primeiramente, quero pedir desculpa pela simplicidade da pergunta, provavelmente este deve ser um assunto trivial para muitos daqui...
      Eu sou muito iniciante, por isso certamente vocês notarão alguns erros no meu código.
       
      Eu criei primeiramente o arquivo index.html, que possui o seguinte código:
       
      <!doctype html>
      <html lang="pt_br">
      <head>
          <meta charset="utf-8">
          <title>Avaliações PF2 Aprovadas</title>
          <link href="style.css" rel="stylesheet" type"text/css">
      </head>
      <body>
      <div id="container">
      <h1>Avaliações</h1>
      <div id="tabela">
      <table border="1">
      <script>
          var Campo1;
          var Campo2;
          var Campo3;
          var Campo4;
          var Campo5;
          var Campo6;
          var Campo7;
          var Campo8;
      </script>
      <thead>
      <tr>
      <th><script type>document.write('Campo1')</script></th>
      <th><script type>document.write('Campo2')</script></th>
      <th><script type>document.write('Campo3')</script></tH>
      <th><script type>document.write('Campo4')</script></tH>
      <th><script type>document.write('Campo5')</script></tH>
      <th><script type>document.write('Campo6')</script></tH>
      <th><script type>document.write('Campo7')</script></tH>
      <th><script type>document.write('Campo8')</script></tH>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>Resposta 1</td>
      <td>Resposta 2</td>
      <td>Resposta 3</td>
      <td>Resposta 4</td>
      <td>Resposta 5</td>
      <td><select name="Opcoes_resp_6">
              <option>Opção 1</option>
              <option>Opção 2</option>
              <option>Opção 3</option>
          </select></td>
      <td>    
          <select name="Opcoes_resp_7">
              <option>Resposta A</option>
              <option>Resposta B</option>
              <option>Resposta C</option>
              <option>Resposta D</option>
          </select>
      </td>
      <td><input></input></td>
      <td><input type="button" name="botao-ok" value="OK" onclick="submit"></td>
      </tr>
      </tbody>
      </table>
      </div>
      </div>
      </body>
      </html>
       
      Também criei o arquivo style.css, que possui o seguinte código:
       
      body
      {
          font-family: Calibri;
          text-align: center;
      }
      h1{
          color:#0000ff;
      }
      #tabela{
          margin: 0 auto;
          width: 80%;
      }
      select{
          color: red;
      }
       
       
      Também criei o arquivo table.sql, (o qual tentei criar uma tabela) que possui o seguinte código:
       
      CREATE TABLE AVALIACOES (
      CAMPO1,
      CAMPO2,
      CAMPO3,
      CAMPO4,
      CAMPO5,
      CAMPO6,
      CAMPO7,
      CAMPO8
      );
       
       
      Minha intenção é ter uma planilha em excel, que exportarei para SQL e essa tabela deverá aparecer na página html.
      No entanto, essa tabela deverá ser uma ferramenta de interação com o usuário, onde os campos de 1 a 5 serão fixos, e eles deverá imputar uma resposta nos campos 6, 7 e , 8..
       
      Ao clicar em "ok" a alteração deverá ser transmitida para o banco de dados da tabela SQL, para que eu possa exportar do site, posteriormente, os dados respondidos.
       
      Não tenho ideia sobre como efetuar a interação entre o html/javascript/sql 
      Alguém consegue me ajudar?
       
      Aceito sugestões caso php seja mais prático que sql, por exemplo.
       
       
      Muito obrigada!!!!
      index.html
      style.css
      table.sql
    • Por mmatheusaraujo
      Boa noite pessoal, tenho uma dúvida que me está na cabeça e sozinho não encontro solução. É o seguinte:
       
      Tenho um trabalho para fazer na faculdade com a seguinte funcionalidade e problematização.
      - Os professores muitas vezes marcam datas de provas e trabalhos em lugares diversos, e essa questão acaba que confunde os alunos pois estas informações nuca estão contidas em um mesmo local, então o projeto consiste no seguinte: A página conterá uma espécie de calendário acadêmico onde conterá a divisão de meses com as células (ou seja, o botão de cada dia do ano). A partir de um painel de controle de acesso dos professores, este poderá entrar e e cadastrar a partir deste painel a data da atividade, uma breve descrição de matéria que será discutida e discorrida, e a matéria da qual se refere. Quando esta data for salva, a "célula" referente ao dia da atividade irá se mostrar diferente e clicável, abrindo em lightbox o conteúdo que seja discorrido naquele dado dia conforme o que o professor passou da descrição ao registrar a atividade. Porém estou com dificuldades de como vou fazer essa leitura no banco de dados e direcionar para as célula correspondentes a data de cada um. Alguém pode me ajudar?