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 BrunoMs
      Fala rapaziada, tudo joia?
      Gostaria saber de acordo com a experiência de vocês, como faço pra fazer uma "mask" do tipo preço semelhante ao do pagseguro por exemplo?
      Conforme vamos colocando o preço a input vai formatando o preço em tempo real dentro da input, exemplo:
      49.99
      499.99
      1499.99
       
      Desde já agradeço a orientação pessoal, abração e fiquem com Deus.
    • Por EmersonReinecke
      Bom dia
       
      Estou aprendendo javascript e preciso validar campos de um formulario em javascript.
      Alguem poderia me mostrar como criar id e explicar como funciona,se puder me mostrar um exemplo no meu campo.
       
      <!DOCTYPE html>
      <html>
      <head>
      <link rel="stylesheet" type="text/css"
      href="estilo.css" />
      <meta charset="UTF-8"/>
      <title>Pratica sobre Html Parte-3</title>
      <body class=body >
      <div class=form align="center"><h1>Formulário</h1></div>
      <div class=nome align="center"><p><b>Nome:</b><br></div>
      <div align="center"><input type=text name="nome" size="45"></p><br></div>
      <div class=email align="center"><p><b>Email:</b><br></div>
      <div align="center"><input type=text name="email" size="45"></p><br></div>
      <div class=assunto align="center"><p><b>Assunto:</b><br></div>
      <div align="center"><input type=text name="assunto" size="45"></p><br></div>
      <div class=mensagem align="center"><p><b>Mensagem:</b><br></div>
      <div align="center"><textarea name="Mensagem" rows="10" cols="50" wrap="virtual"></textarea></p><br></div>
      <div align="center"><p><input type="submit" value="Enviar Email"> <input type="reset" value="Limpar Formulário"></p></div>
      </body>
      </html>
    • Por BarryAllen
      Estou utilizando esse codigo:
      <?php include '../config/config.php'; if($_POST['type'] == 'load_url') { $id = (int) $_POST['id']; $sql = mysql_query("SELECT * FROM players WHERE id='$id'"); $item = mysql_fetch_array($sql); $dados['link'] = $item['link']; echo json_encode($dados); exit; } $id = (int) $_GET['id']; $sql = mysql_query("SELECT * FROM players WHERE id='$id'"); $item = mysql_fetch_array($sql); ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CinePopHD | Player</title> <script src="https://www.cinepophd.com/media/bower_components/angular/angular.js"></script> <script src="https://www.cinepophd.com/media/bower_components/angular-translate/angular-translate.js"></script> <script src="https://www.cinepophd.com/media/bower_components/jquery/dist/jquery.js"></script> <script src="https://www.cinepophd.com/media/bower_components/jquery-mousewheel/jquery.mousewheel.js"></script> <script src="https://www.cinepophd.com/media/bower_components/mousetrap/mousetrap.js"></script> <script src="https://www.cinepophd.com/media/bower_components/angular-local-storage/dist/angular-local-storage.js"></script> <script src="https://www.cinepophd.com/media/bower_components/angularjs-slider/dist/rzslider.min.js"></script> <script src="https://www.cinepophd.com/media/bower_components/streama-i18n/dist/streama-i18n.min.js"></script> <script src="https://www.cinepophd.com/media/dist/streama-video-player.js"></script> <link rel="stylesheet" href="https://www.cinepophd.com/media/bower_components/Ionicons/css/ionicons.css"> <link rel="stylesheet" href="https://www.cinepophd.com/media/bower_components/angularjs-slider/dist/rzslider.css"> <link rel="stylesheet" href="https://www.cinepophd.com/media/dist/streama-video-player.css"> <style> body{ background: black; } </style> </head> <body oncontextmenu="return false"> <body ng-app="myModule"> <streama-video-player options="$root.videoOptions"> </streama-video-player> <script type="text/javascript"> angular.module('myModule', ['streama.videoPlayer']).run(function ($rootScope) { $rootScope.videoOptions = { videoSrc: '', isExternalLink: true, videoMetaTitle: 'Jovens Titãs', videoMetaSubtitle: 'O Contrato de Judas', videoMetaDescription: 'O filme não deve adaptar literalmente o arco The Judas Contract, mas apenas se inspirar na história, onde os Titãs enfrentam a traição da personagem Terra, que se une ao Exterminador para acabar com a equipe. Jay Oliva, também de Liga da Justiça Sombria, dirige e não há data de lançamento.', showNextButton: false, episodeList: { 1: [ {id: 1, name: 'Temporada 1: Ep.1 "Piloto"', season_number: 1, episode_number:1, episodeString: 'Temporada 1: Ep.1', overview: 'Barry acorda do coma e usa sua nova e extraordinária velocidade para combater outro meta-humano que usa poderes meteorológicos para assaltar bancos.'}, {id: 2, name: 'Temporada 1: Ep.2 "O Homem Mais Rápido do Mundo', season_number: 1, episode_number:2, episodeString: 'Temporada 1: Ep.1', overview: 'Barry enfrenta diversos assassinos que invadem a premiação onde ele acompanha Iris, mas os efeitos colaterais de seus novos superpoderes representam uma ameaça.'} ] }, showEpisodeBrowser: false, currentEpisode : { episode: 1, season: 1 }, } }); </script> </body> </html> Mas não sei como adptar o $dados['link'] = $item['link']; Ali em videoSrc: ' ' tem o url do video em mp4 dentro da Tabela: "players" na coluna link mas não sei passar ela pro JS
      Alguém pode fazer o code Pronto para min por favor?
    • Por lucascuri1
      Tenho o seguinte código:
      <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1>Teatro</h1> <hr> <p>Poltrona:<input id="poltrona"> <button type="button" onclick="reservarPoltrona()">Reservar</button> </p> <hr> <div id="mapa" style="font-family: 'Courier New'; font-size: 10px"> <h3>Mapa do Teatro</h3> </div> <p>Legenda: </p> <h4> <img src="banco.jpg" style="width: 25px; height: 35px">Poltrona Disponível <img src="banco2.jpg" style="width: 25px; height: 35px">Poltrona Reservada </h4> <script> var aReserva = []; montarMapa(); function montarMapa() { for (i = 1; i <= 300; i++) { var sp = document.createElement("span"); var zeros = ""; if (i<10) { zeros = "00"; } else if (i<100) { zeros = "0"; } var num = document.createTextNode("["+zeros+i+"]"); if (i % 20 == 11) { sp.style.marginLeft = "100px"; } else { sp.style.marginLeft = "5px"; } sp.appendChild(num); document.getElementById("mapa").appendChild(sp); var banco = document.createElement("img"); banco.src = "banco.jpg"; document.getElementById("mapa").appendChild(banco); banco.style.width = "35px"; banco.style.height = "40px"; banco.id = "banco" + i; if (i % 20 == 0) { var br = document.createElement("br"); document.getElementById("mapa").appendChild(br); } } } function reservarPoltrona() { var poltrona = document.getElementById("poltrona").value; aReserva.push(poltrona); if (poltrona == "" || isNaN(poltrona)) { alert("Informe os dados da reserva corretamente"); } else { } } </script> </body> </html> E tenho 3 tarefas:
      - Armazenar as reservas de poltrona no vetor aReserva;
      - Trocar a imagem da poltrona reservada (banco2.jpg) - aqui poderia ser qualquer imagem de poltrona, apenas para fazer a distinção das poltronas livres para as reservadas);
      - Impedir a reserva de poltronas ocupadas.
       
      Estou quebrando a cabeça para tentar resolver isso, e apesar de ser simples, não consigo. Estou recém começando a aprender sobre a DOM e ainda não domino nem 10% desses elementos, se pudessem ao menos me dar uma luz, eu ficaria muito grato.


    • Por KarolinePaixao
      Preciso que a cada vez que clica no botao "cadastrar lorem "  incrementa mais '1'  no no href "Em andamento" na class "badge",ou seja a cada vez a eu clicar no botao acrescentar +1 em outro"botao"
      segue codigo:
       
      <ul class="nav nav-pills nav-stacked ">
           <li class="active"><a href="#section1 " class="andamento">EM ANDAMENTO<spam class ="badge" >0</spam>      </a> </li>
           <br>
           <li><a href="#section2" class="atrasada" >ATRASADAS<spam class ="badge" >1</spam></a></li> 
           </ul><br>
            
            <div class="input-group">
            <span class="input-group-btn">
            <span class="glyphicon glyphicon-search"></span>
            </button>
            </span>
            </div>
            </div>
            <div class="col-sm-9 comeco " >
            <hr >
            <div class"texto titulo ">Em andamento <button type="button" class="btn btn-primary bot" class"buttom-center">Cadastrar lorem</button>
            <hr >
            </div>