Ocultar parte web

ratontm #1 Nov '12

Hola, tengo una duda, y es que me ha molado mucho el efecto que tienen en esta web http://www.madebysofa.com/ donde cuando entras en cada una de las secciones se muestra debajo.

Es decir, primero esta oculto y cada opción del "menú" te lleva a una ancla (por ej. http://www.madebysofa.com/#people ) y te hace visible ese contenido, además de desplazar la web hacia abajo (que imagino que utilizarán algún script para hacer ese efecto de movimiento en el scroll).

La duda es, cómo se puede implementar algo así?

kraneok #2 Nov '12 Penitente

#1 Creo que también podría hacerse sin anclas, simplemente ocultando los divs según convenga.

Zuki #3 Nov '12

#1 prueba con jQuery, es bastante sencillo.

1 respuesta

SicKneSs #4 Nov '12

#1 lo que dice #3 + AJAX.

2 respuestas

ratontm #5 Nov '12

El problema es que no domino bien jQuery y Ajax, quiero decir. No sé, por ejemplo, que debo buscar para encontrar estos plug-ins por internet. (No sé si me entenderéis. xD)

2 respuestas

glolg #6 Nov '12

#5 has de empezar enlazando la libreria de jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Después para hacer de forma muy sencilla el efecto que dices, puedes hacerlo modificando el estilo de los divs que quieres mostrar con display:block y display:none, según.
Ahora, esta modificación del css puedes hacerlo directamente dentro de un evento, click, mouseover etc...
Para buscar referencias sobre el tema, es muy sencillo;
ej: fade con jQuery
ej: modificar css con jQuery
etc...

Otra es tener todo el contenido en BD y con ajax como te dicen cargar consultas sobre el mismo div sin necesidad de actualizar la pagina.

2 respuestas

Zuki #7 Nov '12

#5

una vez tengas enlazado el archivo JS como ha comentado #6

añades esto en el head


$(document).ready(function(){
 
    $("#capaamostrar").hide();
    $("#idboton").show();
 
$("#idboton").click(function(){
$("#idcapaaocultar").hide(); *// Puedes añadir mas elementos debajo si hay mas de 1 capa
$("#idcapaamostrar").slideToggle();
});
 
});

elkaoD #8 Nov '12

#4 AJAX es completamente innecesario, por no decir contraproducente.

2 respuestas

glolg #9 Nov '12

#8 coincido contigo, pero por ser una forma de poder hacer lo nombrado lo he dicho.

2 respuestas

elkaoD #10 Nov '12

#9 ¿cómo? ¿tienes doble cuenta y eres SicKneSs también? xD

1 2 respuestas

HaxeR #11 Nov '12

#9 a #10

oho #12 Nov '12

#8 una pregunta sin entender mucho y por curiosidad.

en esa web parece que no hay salto de página y si no utiliza ajax, ¿no estaría cargando todo el contenido visible y oculto? ¿o si hay salto de página?

1 respuesta

elkaoD #13 Nov '12

#12 carga todo el contenido y sólo muestra el que interesa.

1 respuesta

oho #14 Nov '12

#13 entonces con ajax sería mejor no? estarías cargando solo el contenido que te interesa ahorrando en kbs ¿por qué contraproducente?

1 respuesta

elkaoD #15 Nov '12

#14

Ahorrar un par de kb no es ahorrar, es ser un agonías.
No ahorras de hecho, probablemente se lleve más en abrir la conexión TCP (multiplicado por el número de secciones), mandar cabeceras HTTP, etc. que en mandarlo todo de golpe.
Latencia en mostrar las secciones (se soluciona pre-cargando, pero para eso mándalo todo.)
Caché más eficiente (no hay que esperar el 304 del servidor en cada sección.)
Con cacheos, sólo se descargan la web UNA vez.
http://www.funcion13.com/2012/04/19/la-cache-en-las-peticiones-ajax-de-jquery/
SEO
SEO
SEO
SEO
SEO

#17 he editado un par de cosillas más.

2 1 respuesta

P

PERAL #16 Nov '12

Llamadme loco pero creo que #1 no tiene ni jodida idea de programación y lo único que quiere es un archivo para meterlo en su web y que funcione xD

1 respuesta

oho #17 Nov '12

#15 interesante, gracias.

1 respuesta

ratontm #18 Nov '12

#16 En parte tienes razón, estoy empezando. Mirando cosas por mi cuenta, lo que pasa que entiendo la gran mayoría de conceptos. Ahora mismo lo que ando haciendo últimamente es que si veo algunas cosas de webs que me gustan voy al código fuente y le echo una ojeada para ver como "funciona", pero lo hice en esta y no sabía si utilizaban javascript o con los divs y css o cómo.

En fin, poco a poco, no? Por cierto, gracias por las respuestas, todo será trastear un poco.

glolg #19 Nov '12

#10 what da fak???? xDD , no soy multicuenta lo que estoy en clase y posiblemente este tal SicKneSs irá a mi escuela. Pregúntale si lo conoces si es de Monlau.

1 respuesta

elkaoD #20 Nov '12

#19 es de Las Palmas. Aquí está habiendo un WTF en toda regla. ¿Tú escribiste #4 o te refieres al final de #6? xD

1 respuesta

SicKneSs #21 Nov '12

hola? xD

glolg #22 Nov '12

#20 yoquese!!!xDDDD mas liao con lo del multicuenta por mi que borren los post xDDD
Perdonad mi mongolismo !!

alterego #23 Nov '12

#1 Tienes otra opción si no quieres utilizar js, mediante display y target:
http://jsfiddle.net/nuXXM/

2 2 respuestas

elkaoD #24 Nov '12

#23 increíble! No se me hubiera ocurrido nunca.

ratontm #25 Nov '12

#23 Creo que es la opción que más me gusta. Podrías explicar un poco cómo funciona?

#26 Gracias!

2 respuestas

alterego #26 Nov '12

#25
En primer lugar oculto todos los divs, si quieres ocultar sólo unos divs concretos tendrás que aplicar display: none a cada uno:

#divUno, #divDos ... {
display: none;
}

A continuación, en el menu, los enlances hacen referencia a los ids de los divs, anchors.

<a href="#id_del_div">enlace 1</a>

Finalmente div:target , significa que cuando el div sea target de la página haga lo que escribas a continuación:

div:target {
aqui las propiedades que quieras cuando el div sea target
}

Para que te hagas una idea: www.pagina.com/hola#loquesea <- este es el target

1 1 respuesta

SicKneSs #27 Nov '12

target o marcador comunmente llamado en HTML

Buffoncete #28 Nov '12 Inocente

#25 también puedes seguir el tutorial de web y css de codecademy y aprender todo esto de manera muy sencilla y dinámica.

Ocultar parte web

Usuarios habituales

Tags