Foros del Web » Creando para Internet » CSS »

Aporte- Cargar diferente contenido en in div

Estas en el tema de Aporte- Cargar diferente contenido en in div en el foro de CSS en Foros del Web. Lo siguiente es una idea(original de Chris Coyier) un poco arreglada de cómo cargar diferente contenido en una misma página usando css. En algunos casos ...
  #1 (permalink)  
Antiguo 22/04/2009, 15:08
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Información Aporte- Cargar diferente contenido en in div

Lo siguiente es una idea(original de Chris Coyier) un poco arreglada de cómo cargar diferente contenido en una misma página usando css.
En algunos casos puede resultar práctico, como lo fue para mi, poder cargar un contenido diferente sin tener que releer toda la página que sigue, como cunado tenemos una cabecera flash que tarda un poco en cargarse, y eso lo logramos mediante CSS y un pequeño Script.
Es simple, y solo es un pequeño “engaño” o “cambio visual” lo que sucede. Para ello, vamos a crear varios div con las mismas características pero con diferente ID, asi por ejm:
Código CSS:
Ver original
  1. #centro_index{
  2.     position:relative;
  3.     left:0px;
  4.     top:0px;
  5.     width:780px;
  6.     z-index: 99;
  7.     display:none;
  8. }
  9. #centro_galeria{
  10.     position:relative;
  11.     left:0px;
  12.     top:0px;
  13.     width:780px;
  14.     z-index: 99;
  15.     display:none;
  16. }
  17. #centro_contacto{
  18.     position:relative;
  19.     left:0px;
  20.     top:0px;
  21.     width:780px;
  22.     z-index: 99;
  23.     display:none;
  24. }

Todos ellos van a contener diferente contenido, pero solo uno a la vez será visto, gracias a la propiedad de Display. La posición relativa nos ayuda a colocar el div justo donde estaba el anterior, ayudado por el z-index. Ahora bien, con un script aplicado al botón que carga el contenido vamos a cambiar el estado de el div en su propiedad de Display, de esta forma:
Código HTML:
<a href="#" onclick="javascript:document.getElementById('centro-home').style.display='block' 
; document.getElementById('centro_galeria').style.display='none'
; document.getElementById('contacto_galeria').style.display='none';">Home</a> 
En la anterior instrucción le estamos cambiando el estado del display de none a block, block nos mostrará el contenido del div oculto, y el none se encarga de ocultar los demás div mientras este este presente.
Como nosotros necesitamos que al inicio de la página se muestre el contenido del index page, entonces en nuestro css el index debe estar en display:block, :
Código CSS:
Ver original
  1. #centro_index{
  2.     position:relative;
  3.     left:0px;
  4.     top:0px;
  5.     width:780px;
  6.     z-index: 99;
  7.     display:block;
  8. }

O bien, si lo deseamos podemos mostrar un contenido distinto de forma temporal, hasta un gif animado de "loading" segun nuestro gusto y forma de pensar.

Aqui esta un ejemplo. Si se fijan, al darle click, la página se mantiene siempre.

Espero que le sirva a algunos y a los que saben mucho, quizá hasta puedan optimizar este método.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 22/04/2009 a las 17:12
  #2 (permalink)  
Antiguo 23/04/2009, 15:30
 
Fecha de Ingreso: octubre-2008
Mensajes: 1
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Aporte- Cargar diferente contenido en in div

Que bueno, y no hay una forma de cargar toda una página? como lo que hacen los frames
  #3 (permalink)  
Antiguo 24/04/2009, 10:51
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Aporte- Cargar diferente contenido en in div

con pageloader
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:30.