• Domingo 22 de Diciembre de 2024, 02:23
« anterior próximo »
Páginas: [1]

Autor Tema:  Capas en DIV  (Leído 4194 veces)

samso

  • Nuevo Miembro
  • *
  • Mensajes: 4
    • Ver Perfil
Capas en DIV
« en: Lunes 20 de Abril de 2009, 17:10 »
0
Buenas,

Estoy creando una web con xhtml, la pagina esta creada por capas "DIV"
Lo que me gustaria hacer es que dandole un clic a un boton que esta en un div, que en el div "Contenedor" que el que esta en medio y donde se ve el contenido de la web.
Como puedo hacer para que dar un clic solo se cambie el contenido del  div en concreto.


Muchas gracias.

zeickan

  • Nuevo Miembro
  • *
  • Mensajes: 18
  • Nacionalidad: mx
    • Ver Perfil
    • http://www.xstilo.net
Re: Capas en DIV
« Respuesta #1 en: Lunes 20 de Abril de 2009, 17:46 »
0
Con JavaScript y si quieres algo mas dinamico utiliza AJAX para cargar el contenido desde un XML o una DB.

Código: Text
  1.  
  2. function cargar(){
  3. var capa = document.getElementById("capa");
  4. capa.innerHTML = "CONTENDIDO QUE QUEREMOS CARGAR MWHAHAHAHA XD";
  5. }
  6.  
  7.  

Y para llamar a la funcion desde tu boton

Código: Text
  1. <input type="button" onClick="cargar();" value="Funcion cargar">
  2.  

Eso seria en Javascript simple y plano.

Ryusaki N

  • Miembro activo
  • **
  • Mensajes: 76
    • Ver Perfil
Re: Capas en DIV
« Respuesta #2 en: Lunes 20 de Abril de 2009, 18:20 »
0
Mmmm.... Que interesante explicacion la de Zeickan. No sabia de la existencia de la cadena innerHTML.... Por cierto AJAX esta siendo muy usado ahora, vale la pena aprenderlo.
C/C++/C#/Java/Python dev. Frontend web developer. ASP.NET && PHP, ASM x86
No tengo vida social y me siento orgulloso!! 1000% Geek.

samso

  • Nuevo Miembro
  • *
  • Mensajes: 4
    • Ver Perfil
Re: Capas en DIV
« Respuesta #3 en: Martes 21 de Abril de 2009, 22:27 »
0
Me podrias explicar, en el innerHTML, va el contenido, pero yo el contenido quiero que sea otra pagina, es como si fuese una redireccion.

Nose si me explico..

Y otra cosa, si para llamarlo en vez de usar un boton se usa un link, como seria?



Muchas gracias por todo, y perdon por preguntar tanto.

 :rolleyes:  :rolleyes:

zeickan

  • Nuevo Miembro
  • *
  • Mensajes: 18
  • Nacionalidad: mx
    • Ver Perfil
    • http://www.xstilo.net
Re: Capas en DIV
« Respuesta #4 en: Martes 21 de Abril de 2009, 23:10 »
0
¿La pagina es externa o interna a tu servidor?

Para hacerlo desde un enlace seria asi:

Código: Text
  1. <a onClick="cargar();" style="cursor:pointer;">LINK</a>
  2.  

samso

  • Nuevo Miembro
  • *
  • Mensajes: 4
    • Ver Perfil
Re: Capas en DIV
« Respuesta #5 en: Martes 21 de Abril de 2009, 23:24 »
0
Interna, es otra seccion de la web.

Digamos tengo el index, y cuando le das por ejemplo a contacta, pues que se carge el contenido ese en el div.


Muchas gracias por todo  ^_^

zeickan

  • Nuevo Miembro
  • *
  • Mensajes: 18
  • Nacionalidad: mx
    • Ver Perfil
    • http://www.xstilo.net
Re: Capas en DIV
« Respuesta #6 en: Martes 21 de Abril de 2009, 23:48 »
0
Código: PHP
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h t t p : / / w w w .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="h t t p : / / w w w .w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Pagina de ejemplo contenido interno</title>
  6. <script language="JavaScript" type="text/javascript">
  7. function nuevoAjax()
  8. {
  9.     var xmlhttp=false;
  10.     try
  11.     {
  12.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  13.     }
  14.     catch(e)
  15.     {
  16.         try
  17.         {
  18.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.         }
  20.         catch(E) { xmlhttp=false; }
  21.     }
  22.     if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }
  23.  
  24.     return xmlhttp;
  25. }
  26.  
  27. function cargar(capa,doc){
  28. var div = document.getElementById(capa);
  29.    
  30.     var ajax=nuevoAjax();
  31.         ajax.open("GET", "secc/"+doc+".php", true);
  32.         ajax.onreadystatechange=function()
  33.         {
  34.             if (ajax.readyState==1){
  35.                 div.innerHTML="CARGANDO...";                            
  36.             }
  37.             if (ajax.readyState==4){
  38.                 div.innerHTML=ajax.responseText;            
  39.             }
  40.         }
  41.         ajax.send(null);
  42.  
  43. }
  44.  
  45. </script>
  46. </head>
  47. <body>
  48. <a style="cursor:pointer;" onclick="cargar('body','main');">Pagina principal</a> | <a style="cursor:pointer;" onclick="cargar('body','contacto');">Contacto</a>
  49. <div id="body"><? @include("secc/main.php"); ?></div>
  50.  
  51. </body>
  52. </html>
  53.  
  54.  

Te explico como funciona los encargados de llamar a cada archivo es onclick="cargar('body','main');" donde pone body es el ID de la capa donde sera cargado el documento y donde pone main es el nombre del archivo con extencion .php dentro de la carpeta secc que sera llamado.

Eso de no se pueden publicar enlaces aplica hasta para el codigo del DOCTYPE?, incluso si le pongo no convertir en URL automaticamente, pienso que deberian revisar bien el codigo de comprobacion o darme permisos creo que ya pueden notar que SPAMER no soy XD

samso

  • Nuevo Miembro
  • *
  • Mensajes: 4
    • Ver Perfil
Re: Capas en DIV
« Respuesta #7 en: Miércoles 22 de Abril de 2009, 00:05 »
0
Muchisimaaas gracias por todooooooooooooooo :lol:  :lol:

Era esto lo que buscaba  :D  Me pondre a aprender ajax porque parece interesante


Muchas gracias de verdad. :)  :D  :beer:
Páginas: [1]
« anterior próximo »