JavaScript - cargar html en otro div con javascript

   
Vista:

cargar html en otro div con javascript

Publicado por Rosy (15 intervenciones) el 17/07/2013 17:02:16
Hola, estoy haciendo una pagina web cuya maquetacion la hago con divs. Tengo 4 Div:

1.- div "contenedor"
2.- div "cabecera"
3.- div "lateral"
4.- div "contenido"

Es mas o menos lo tipico, en el div "lateral" coloco un menú que cuando hago click en alguna de las opciones se debe cargar una pagina html o php en el div "contenido".
En este mismo foro encontré la funcion javascript que permite realizar esta funcionalidad, solo que se produce un solo detallito que no sé como arreglar y es que al presionar la opcion y cargar la pagina en el div "contenido", este div se baja una linea, como que se mueve hacia abajo y no sé como arreglar eso. Dejo el codigo a ver si alguien me echa una mano con esto.

Lo probé en Mozilla, IE y Chrome y en los tres funciona de igual forma

INDEX.PHP
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estadistica Hospital Carlos Van Buren</title>
<link href="divs.css" rel="stylesheet" type="text/css" />
 
<script language="JavaScript">
 
function carga(url,id){
var pagecnx = createXMLHttpRequest();
pagecnx.onreadystatechange=function(){
  if (pagecnx.readyState == 4 &&
     (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
	 document.getElementById(id).innerHTML=pagecnx.responseText;
  }
  pagecnx.open('GET',url,true)
  pagecnx.send(null)
}
 
function createXMLHttpRequest(){
var xmlHttp=null;
if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
	     xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
 
</script>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="lateral">
<a href="javaScript:;" onclick="carga('pag01.html','contenido');">Opcion 01</a></br>
<a href="javaScript:;" onclick="carga('pag02.html','contenido');">Opcion 02</a></br>
</div>
<div id="contenido"></div>
</div>
</body>


Aqui está la pagina de estilo
DIVS.CSS
1
2
3
4
5
6
7
#contenedor { widht: 968px; background-color:#000000 }
 
#cabecera { width:900px; height:130px; background-color:#CC0000 }
 
#lateral { width:100px; height:500px; background-color:#00CCFF; float:left; }
 
#contenido { width:800px; height:500px; background-color:#FFCCFF  }


La pag01.html no es mas que una pagina de prueba para ver como funciona y solo tiene una pequeña leyenda, a continuacion lo adjunto:

PAG01.HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
 
<body>
 
<p>Aqui se escribe el texto de la pagina 01 que es llamada desde el primer hipervinculo</p>
<p>fasfadfsd</p>
<p>dsfsdf</p>
<p> </p>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

cargar html en otro div con javascript

Publicado por xve (1596 intervenciones) el 17/07/2013 21:10:16
Hola Rosy, creo que he visto donde tienes el problema...

La pagina que cargas en el centro (pag01.html,..) de tu pagina, no necesitas volver a definir el tipo de pagina (<!doctype...), ni volver a definir una cabecera... ni tan siquiera indicar los tags de <body>... todo lo cogerá de la pagina donde se inserte el contenido, por lo que únicamente tienes que devolver el código que quieras que aparezca en el div.

Te recomiendo que utilices jquery... entre otras muchas cosas, te facilitara la vida para las peticiones ajax.

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cargar html en otro div con javascript

Publicado por Rosy (15 intervenciones) el 17/07/2013 21:28:17
Hola Xve, te agradezco el que hayas visto mi problemilla. Probé lo que me sugieres, pero igual no funcionó, le saqué todo a la pag01.html pero sigue ocurriendo el problema, al dar click en la opcion 01 muestra el contenido de la pag01.html pero el div "contenido" se sigue desplazando una linea hacia abajo

Me aconsejas que use jquery, bueno no conozco jquery, tienes algun ejemplo del que pueda sacar la idea de lo que estoy tratando de hacer?

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cargar html en otro div con javascript

Publicado por martin (45 intervenciones) el 18/07/2013 04:01:22
mmmm proba poner al contenedor con margin:0px; y cada elemento con un display:inline;

saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cargar html en otro div con javascript

Publicado por Rosy (15 intervenciones) el 18/07/2013 15:32:48
Martin, gracias por la respuesta. No se solucionó con el margin 0px pero al div contenido le agregué float:left y se arregló.

Saludos
Rosy
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

cargar html en otro div con javascript

Publicado por xve (1596 intervenciones) el 18/07/2013 09:01:31
En esta misma pagina encontraras muchos ejemplos: http://www.lawebdelprogramador.com/codigo/JQuery/index3.html

pero una manera sencilla es utilizar .load() de jquery... para que te hagas una idea, para cargar el contenido de la pagina pag01.html en el id contenido, seria algo así:
1
$("#contenido").load("pag01.html");


Con una sola linea es suficiente...

espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Gracias por ejemplo

Publicado por Rosy (15 intervenciones) el 18/07/2013 15:30:50
xve, gracias por el ejemplo de load de jquery, lo probé y resulta bien, aunque el problemilla que menciono continua y no se soluciona con el Jquery lo voy a utilizar porque se ve mas conveniente.

Gracias nuevamete xve, tus respuestas y consejos siempre son de mucha ayuda.

Saluos
Rosy
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Gracias por ejemplo

Publicado por xve (1596 intervenciones) el 18/07/2013 19:54:48
Hola Rosy, he probado tu código, y lo que tienes que hacer en el pagina pag01.html, es no empezar por <p>... ya que te hace un salto de pagina, y es lo que ves en negro.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar