Código de JavaScript - Mostrar/Ocultar div en scroll

Imágen de perfil

Mostrar/Ocultar div en scrollgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 2 de Junio del 2009 por Administrador
21.560 visualizaciones desde el 2 de Junio del 2009
Código que muestra como mostrar y ocultar un div en modo scroll.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 2 de Junio del 2009gráfica de visualizaciones de la versión: Versión 1
21.561 visualizaciones desde el 2 de Junio del 2009
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
 http://www.lawebdelprogramador.com
 -->
<html>
<head>
<title>Mostrar/Ocultar div en scroll</title>
 
<script type="text/javascript">
<!--
function mostrarDiv()
{
	if(document.getElementById('iddiv').style.display=='none')
	{
		altura=0;
		//Colocamos el div al inicio para iniciar la apertura
		//Esto se hace, ya que puede ser que el div estubiera abierto y oculto
		document.getElementById('iddiv').style.height=altura+"px";
		//mostramos el div para visualizar el movimiento
		document.getElementById('iddiv').style.visibility='visible';
		document.getElementById('iddiv').style.display='block';
		expandir();
	}else{
		altura=heightDiv;
		contraer();
	}
}

// Funcion para expandir
function expandir()
{
	//Siempre y cuando la altura sera inferior al la altura maxima
	if(altura++<heightDiv)
	{
		document.getElementById('iddiv').style.height=altura+"px";
		if((altura*100/heightDiv)>85)
		{
			//Cuando lleva mas del 85% de apertura, relentizamos un poco para que de sensacion de paro
			window.setTimeout ("expandir();", 20);
		}else{
			window.setTimeout ("expandir();", 5);
		}
	}
}

// Funcion para contraer
function contraer()
{
	//Siempre y cuando la altura sera superior a 0
	if(altura-->0)
	{
		document.getElementById('iddiv').style.height=altura+"px";
		if((altura*100/heightDiv)<15)
		{
			//Cuando lleva menos del 15% de apertura, relentizamos un poco para que de sensacion de paro
			window.setTimeout ("contraer();", 20);
		}else{
			window.setTimeout ("contraer();", 5);
		}
	}
	//Cuando llegue al final, esconedmos el div
	if(altura==0)
	{
		document.getElementById('iddiv').style.display='none';
		document.getElementById('iddiv').style.visibility='hidden';
	}
}
//-->
</script>
 
</head>
 
<body>
	<div>
	<h1>Mostrar/Ocultar div en scroll</h1>
	<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
	</div>
	<p>
		<div><a href="javascript:mostrarDiv();">Mostrar/Esconder Div</a></div>
		<div id="iddiv" style="border:1px solid;overflow:hidden;">
			<div style="padding:5px;">
				hola
				<br />hola2
				<br />hola3
				<br />hola4
			</div>
		</div>
		<div>Texto a continucación del div...</div>
	</p>
</body>
 
<script type="text/javascript">
<!--
//cogemos la altura actual del div
var heightDiv=document.getElementById('iddiv').offsetHeight;
//Iniciamos con el div escondido
//Lo hacemos a posteriori para poder coger el tamaño del div...
document.getElementById('iddiv').style.display='none';
-->
</script>
</html>



Comentarios sobre la versión: Versión 1 (2)

carlos garcía
28 de Junio del 2009
estrellaestrellaestrellaestrellaestrella
está estupendo.
¿sabéis si puedo ponerlo uno seguido de otro? lo estoy intentando y no me sale. Quiero hacer algo de este estilo www.cobe.dk
¿me podéis ayudar?
gracias y un saludo
Responder
Piroloco
1 de Agosto del 2011
estrellaestrellaestrellaestrellaestrella
Es increible lo que se hace para ganar unos mangos con las propagandas de Google !!!! Este script no funciona
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1803