Ayuda! Ocultar div tras clic y reaparecer en x tiempo

JoseCuevas · 27 May 2016

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:

iniciopublic · 27 May 2016

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

marjuanm · 27 May 2016

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>

kanikase · 27 May 2016

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

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>

🙂

JoseCuevas · 27 May 2016

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

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">  </script> </head> <body> <div onclick="reaparece();" id="mydiv">el contenido de tu div</div> </body> </html>

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>

🙂

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!

YeltsinReyes · 27 May 2016

[MENTION=26950]JoseCuevas[/MENTION] quieres agregarla cuando se oculte?

JoseCuevas · 27 May 2016

YeltsinGraphs dijo:
[MENTION=26950]JoseCuevas[/MENTION] quieres agregarla cuando se oculte?

Quiero que primero se ejecute el class y luego el id, osea primero se ejecute la acción "iframe" y luego el "div" :encouragement:

YeltsinReyes · 27 May 2016

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:

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>

JoseCuevas · 27 May 2016

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>

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?

YeltsinReyes · 27 May 2016

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?

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>

Ayuda! Ocultar div tras clic y reaparecer en x tiempo

JoseCuevas

iniciopublic

marjuanm

kanikase

JoseCuevas

YeltsinReyes

JoseCuevas

YeltsinReyes

JoseCuevas

YeltsinReyes

Privacidad y transparencia

Privacidad y transparencia