Ayuda! Ocultar div tras clic y reaparecer en x tiempo

  • Autor Autor JoseCuevas
  • Fecha de inicio Fecha de inicio
JoseCuevas

JoseCuevas

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Hola betas, buenos días!!

Tengo el siguiente problema/necesidad:

Quiero que un div tras dar clic se desaparezca y reaparezca después de cierto tiempo, ¿Tienen idea de cómo podría realizarlo?

Encontré esto:

Edit fiddle - JSFiddle

Pero no puedo lograr que funcione en wordpres :/

Gracias de antemano! :encouragement:
 
Hola
Insertar CODE, HTML o PHP: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		
	document.getElementById('div').style.display='none';
setTimeout(function(){ 
document.getElementById('div').style.display='block'; }, 3000); /// tiempo en milisegundos

	});
	
	});
	</script>
<div id="div" class="div">prueba prueba</div>

Saludos
 
Pues nunca he insertado javascript en wordpress, pero puedes guiarte con esto https://ayudawp.com/insertar-javascript-en-wordpress/
Por cierto este codigo hace lo que pides (sin recurrir a jquery), por si te sirve, ahora cuando hallas podido insertar javascript en wordpress solo adaptalo, saludos.

HTML: 
<html>
<head>
<title>div que desaparece</title>
<script language="JavaScript">
<!--

function reaparece()
{

    document.getElementById("mydiv").style.display = "none";
    setTimeout("reaparecer();", 2500);

}

function reaparecer()
{
   document.getElementById("mydiv").style.display = "block";
}

-->
</script>
</head>
<body>
<div onclick="reaparece();" id="mydiv">el contenido de tu div</div>
</body>
</html>
 
iniciopublic dijo:
Hola
Insertar CODE, HTML o PHP: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		
	document.getElementById('div').style.display='none';
setTimeout(function(){ 
document.getElementById('div').style.display='block'; }, 3000); /// tiempo en milisegundos

	});
	
	});
	</script>
<div id="div" class="div">prueba prueba</div>

Saludos
Hacer clic para expandir...

Insertar CODE, HTML o PHP: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		var $t = $(this);
		$t.hide();
		setTimeout(function(){ 
			$t.show();
		}, 3000); /// tiempo en milisegundos
	});
});
</script>
<div id="div" class="div">prueba prueba</div>

🙂
 
iniciopublic dijo:
Hola
Insertar CODE, HTML o PHP: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		
	document.getElementById('div').style.display='none';
setTimeout(function(){ 
document.getElementById('div').style.display='block'; }, 3000); /// tiempo en milisegundos

	});
	
	});
	</script>
<div id="div" class="div">prueba prueba</div>

Saludos
Hacer clic para expandir...

marjuanm dijo:
Pues nunca he insertado javascript en wordpress, pero puedes guiarte con esto https://ayudawp.com/insertar-javascript-en-wordpress/
Por cierto este codigo hace lo que pides (sin recurrir a jquery), por si te sirve, ahora cuando hallas podido insertar javascript en wordpress solo adaptalo, saludos.

HTML: 
<html>
<head>
<title>div que desaparece</title>
<script language="JavaScript">
<!--

function reaparece()
{

    document.getElementById("mydiv").style.display = "none";
    setTimeout("reaparecer();", 2500);

}

function reaparecer()
{
   document.getElementById("mydiv").style.display = "block";
}

-->
</script>
</head>
<body>
<div onclick="reaparece();" id="mydiv">el contenido de tu div</div>
</body>
</html>
Hacer clic para expandir...

kanikase dijo:
Insertar CODE, HTML o PHP: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		var $t = $(this);
		$t.hide();
		setTimeout(function(){ 
			$t.show();
		}, 3000); /// tiempo en milisegundos
	});
});
</script>
<div id="div" class="div">prueba prueba</div>

🙂
Hacer clic para expandir...

Muchas gracias a los 3!! :welcoming::welcoming::welcoming:

Ahora que ya puedo hacer que desaparezca, quiero añadirle un class al mismo div que se oculta, lo coloco como es:

<div id="div" class="iframe">prueba prueba</div>

Pero solo se desaparece, no se ejecuta el comando "class", por qué será?
[MENTION=81006]kanikase[/MENTION], creo que ya sabes que función realiza "iframe", es del trabajo que hiciste :welcoming:

Gracias de nuevo!
 
[MENTION=26950]JoseCuevas[/MENTION] quieres agregarla cuando se oculte?
 
YeltsinGraphs dijo:
[MENTION=26950]JoseCuevas[/MENTION] quieres agregarla cuando se oculte?
Hacer clic para expandir...


Quiero que primero se ejecute el class y luego el id, osea primero se ejecute la acción "iframe" y luego el "div" :encouragement:
 
JoseCuevas dijo:
Quiero que primero se ejecute el class y luego el id, osea primero se ejecute la acción "iframe" y luego el "div" :encouragement:
Hacer clic para expandir...

Pero en que momento quieres que se ejecute? luego de que se vuelva a mostrar? porque si el div ya tiene la class y el id se mostraran juntas.
Puedes agregar el id luego de que se vuelva a mostrar el div.

HTML: 
setTimeout(function(){ 
     $t.show();
     $t.attr('id','div');
}, 3000);

HTML: 
<div class="iframe">prueba prueba</div>
 
YeltsinGraphs dijo:
Pero en que momento quieres que se ejecute? luego de que se vuelva a mostrar? porque si el div ya tiene la class y el id se mostraran juntas.
Puedes agregar el id luego de que se vuelva a mostrar el div.

HTML: 
setTimeout(function(){ 
     $t.show();
     $t.attr('id','div');
}, 3000);

HTML: 
<div class="iframe">prueba prueba</div>
Hacer clic para expandir...

Quiero que se ejecute y luego se desaparezca, ya cuando aparezca otra vez, pueda pasar lo mismo (Pero no aparecerá sino dentro de muchos segundos)

Intentaré lo que me dices, pero, ese setTimeout donde debo colocarlo?
 
JoseCuevas dijo:
Quiero que se ejecute y luego se desaparezca, ya cuando aparezca otra vez, pueda pasar lo mismo (Pero no aparecerá sino dentro de muchos segundos)

Intentaré lo que me dices, pero, ese setTimeout donde debo colocarlo?
Hacer clic para expandir...

Es del ejemplo de arriba, el div solo tendrá la class y cuando desaparezca y vuelva a aparecer tendrá la class y el id!

HTML: 
<script type="text/javascript">
$(document).ready(function(){
	$("#div").click(function(){ // evento click
		var $t = $(this);
		$t.hide();
		setTimeout(function(){ 
                        $t.attr('id','div');
			$t.show();
		}, 3000); /// tiempo en milisegundos
	});
});
</script>
<div class="iframe">prueba prueba</div>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba