Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Mostrar/Ocultar div en scroll

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

Volver
Agregar Código Fuente
Filtrado por el tag: html5
<<>>

Versión 1 - HTML4 sin transition
estrellaestrellaestrellaestrellaestrella(3)

Actualizado el 11 de Julio del 2020 (Publicado el 2 de Junio del 2009)gráfica de visualizaciones de la versión: Versión 1 - HTML4 sin transition
22.345 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 - HTML4 sin transition (3)

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
Imágen de perfil
ScriptShow
26 de Abril del 2020
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1 - HTML4 sin transition

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

Versión 2 - Con transition
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 11 de Julio del 2020gráfica de visualizaciones de la versión: Versión 2 - Con transition
5.355 visualizaciones desde el 11 de Julio del 2020
http://lwp-l.com/s1803