Publicidade

d4v1

Mudar nome do conteúdo esconder conteudo

Patrocínio:

Olá, estou precisando de uma ajuda simples, estou com esse código pronto, peguei do www.maujor.com e queria mudar o nome que aparece nos dois campos.

por exemplo:

download 1

(ao clicar acima exibe o download 1)

download 2 suporte

(ao clicar acima exibe o download 2 suporte).

 do jeito que esta, aparece só "revelar conteúdo" e "esconder conteúdo" porque ja esta escrito no js.

segue o código.

e creio que deva ser simples, mas tentei fazer e aparentemente eu teria que adicionar mais código, pela a tentativa que fiz não deu certo. Obrigado desde já.

http://codepen.io/d4v1/pen/GWOzGK

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Toggle texto</title>
<style type="text/css" media="all">
#box-toggle {
	width:500px;
	margin:0 auto;
	text-align:justify;
	font:12px/1.4 Arial, Helvetica, sans-serif;
	}
#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
	display:block;
	cursor:pointer;
	font-weight:bold;
	font-size:14px;
	color:#c30; 
	margin-top:15px;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
	$('.tgl').before('<span>Revelar conteúdo</span>');
	$('.tgl').css('display', 'none')
	$('span', '#box-toggle').click(function() {
		$(this).next().slideToggle('slow')
		.siblings('.tgl:visible').slideToggle('fast');
	
		$(this).toggleText('Revelar','Esconder')
		.siblings('span').next('.tgl:visible').prev()
		.toggleText('Revelar','Esconder')
	});
})
</script>
</head>
<body>
<div id="box-toggle">

<div class="tgl">
<h2>Conteúdo um</h2>
<p>conteudo aqui 11</p>
</div>


<div class="tgl">
<h2>Conteúdo dois</h2>
<p>conteudo aqui 22</p>
</div>

</div>
</body>
</html>

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Busca por eventos de Javascript, especificamente onclick/click

 

Js (Sem Libs/FrameWork):

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#exercicios-em-javascript

 

Um curso legal explicando a repeito de Listeners/seletores/Node/Child/Parent etc.

http://try.jquery.com/

 

 

 

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#inline-veja-o-demo

 

1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 18/03/2017 at 14:58, Eziquiel disse:

Fico muito bom, excelente. 

aproveitando aqui,  como faz para que, quando eu clicar fora do do conteúdo alvo, ele recolha? por exemplo, eu cliquei em download 1 ele abriu, dai quando eu clico em outra coisa qual quer, sem ser download 1 e download 2, ele recolha.

tem como fazer isso ? e fácil fazer ?

Obrigado.

Em 18/03/2017 at 12:08, gabrieldarezzo disse:

Busca por eventos de Javascript, especificamente onclick/click

 

Js (Sem Libs/FrameWork):

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#exercicios-em-javascript

 

Um curso legal explicando a repeito de Listeners/seletores/Node/Child/Parent etc.

http://try.jquery.com/

 

 

 

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#inline-veja-o-demo

 

Muito bom seu curso. gostei mesmo, tem mais ? :D

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pesquisando sobre eventos é possível.

 

Tudo é fácil depois que praticar e estudar ;)

 

O que já tentou / alterou do script do amigo acima?

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
7 minutos atrás, gabrieldarezzo disse:

Pesquisando sobre eventos é possível.

 

Tudo é fácil depois que praticar e estudar ;)

 

O que já tentou / alterou do script do amigo acima?

 

tentei fazer com que o conteúdo download recolha ao clicar fora do conteúdo alvo,  mas fiz muita bagunça com onclick.

coloquei direito na minha página. to tentando ainda.

to meio confuso ainda, Jquery, JS, JSON, parece que tem o mesmo código, na minha página mesmo tem Jquery, JS. ta tudo funcionando perfeitamente, mas não sei qual eu uso pra fazer isso, (recolher ao clicar fora do elemento download).

 

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui está, companheiro. Veja o exemplo funcionando.

 

Apenas acrescentei essa função:

$(document).click(function(e){
  if (e.target.closest('.menu') == null){
    $('.menu ul li div').hide();
    $('.menu ul li').removeClass('active')
  }  
});  

Live Demo:

http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000

1

Compartilhar este post


Link para o post
Compartilhar em outros sites
7 minutos atrás, Eziquiel disse:

Aqui está, companheiro. Veja o exemplo funcionando.

 

Apenas acrescentei essa função:


$(document).click(function(e){
  if (e.target.closest('.menu') == null){
    $('.menu ul li div').hide();
    $('.menu ul li').removeClass('active')
  }  
});  

Live Demo:

http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000

Impressionante, fico ate emocionado vendo funcionar. kkk

eu tava tentando de maneira totalmente diferente.

Você acrescento muita coisa. (em minha opinião de iniciante )

Obrigado. ajudo muito.

Valeu mesmo

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

De nada, companheiro.

É um prazer poder ajudá-lo.

1

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, Eziquiel disse:

Aqui está, companheiro. Veja o exemplo funcionando.

 

Apenas acrescentei essa função:


$(document).click(function(e){
  if (e.target.closest('.menu') == null){
    $('.menu ul li div').hide();
    $('.menu ul li').removeClass('active')
  }  
});  

Live Demo:

http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000

pra o recolher download 1 ao clicar no download 2 e vise e versa, como faço ?  tentei aproveitar o meu anterior, mas parece que nada se aproveita.

tentei usar os mesmo argumento "revelar esconder" mas não deu certo. Pode me ajudar? Muito agradecido pela super ajuda.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, Eziquiel disse:

Uma animação mais interessante.

 

http://codepen.io/Eziquiel/pen/WpMKER?editors=0100

uau. encantado. Muito obrigado.

fico fascinado por essas animações, estou muito querendo fazer uns efeitos fade ao entrar na pagina sabe, sei que js e perfeito para isso, indica algum site de aulas  gratuita ? estou querendo muito fazer esses efeitos, acho muito "massa"


Obrigado pela ajuda. Muito obrigado mesmo.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá. Fiz uma correção no código, pois o menu não abria quando clicava no marcador animado ("+" ou"-").

Acrescentei mais um efeito tipo elástico na animação.

 

O que eu faço pra aprender é pegar algo e tentar reproduzir. Eu estudo bem o código e procuro reproduzir pra entender cada passo. Eu não conheço sites de aulas gratuitas, mas creio que deve haver sim.

 

http://codepen.io/Eziquiel/pen/WpMKER?editors=1000

3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mais uma vez muito obrigado. ajudo muito. fixo excelente.

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 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?
    • Por Lisbi
      Boa tarde pessoal 
       
      Gostaria de saber como faço para manter o meu dominio sempre da mesma forma! Ou seja o mesmo caminho independente de que pagina esteja!!!
      por exemplo
      www.meudominio.com.br/index.php
      www.meudominio.com.br/contato.php
      www.meudominio.com.br/faq.php
       
      Gostaria que aparecesse só 
       
       www.meudominio.com.br
       
       
      Alguem pode me ajudar, algum script para eu ajeitar isso
       
      Desde ja agradeço
       
      Obrigado