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 02 de Junio del 2009 por Administrador
18.195 visualizaciones desde el 02 de Junio del 2009. Una media de 49 por semana
Código que muestra como mostrar y ocultar un div en modo scroll.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 02 de Junio del 2009gráfica de visualizaciones de la versión: Versión 1
18.196 visualizaciones desde el 02 de Junio del 2009. Una media de 49 por semana
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
01 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

http://lwp-l.com/s1803