Mostrar contenidos separados sin usar frames

Hectorito · #1 (**permalink**) 13/01/2012, 17:08

Hola, estoy haciendo un periodico asi que he hecho un menu con ayuda de css, ahora bien es un menu desplegable y necesito que al darle click en uno de los elementos del menu me cargue una pagina que es la de cada categoria del periodico debajo del menu. lo intente con frames pero no es posible ya que para poder visualizar el menu desplegable, el frame donde pondria el contenido del periodico qudaria muy abajo.

digamos que este es uno de los componentes del periodico y un elemento del menu.

Código:

 
<li><a href="#">Deportes</a>
<ul>
<li><a href="#">Golf</a></li>
<li>  <a href="img/auto.jpg">Automovilismo</a></li>
<li><a href="#">Ajedrez</a></li>
<li><a href="#">Rugby</a></li>
<li><a href="#">Natacion</a></li>
<li><a href="#">Beisbol</a></li>
<li><a href="#">Tenis</a></li>
<li><a href="#">Futbol</a></li>
<li><a href="#">Baloncesto</a></li>
<li><a href="#">Patinaje</a></li>
<li><a href="#">Voleibol</a></li>
</ul>
</li>

ahora bien en este caso solo le he colocado evento a la parte automovilismo

Código:

<li><a href="img/auto.jpg">Automovilismo</a></li>

deseo cargar la imagen auto.jpg y deseo que esta se ubique debajo del menu.

como lo podria hacer sin usar frames ya que como la lo dije por el menu desplegable donde ubico el contenido quedaria muy abajo para poder darle espacio al menu deslegable

adjunto la imagen de la pagina para que tengan una idea mas clara

gracias de antemano

emprear · #2 (**permalink**) 13/01/2012, 18:17

Crear un div para el contenido de las categorías y cargarlo dinamicamente con ajax, sería una buena opción.

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" / >
<script type="text/javascript">
//<![CDATA[
function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}
 
 
function CargarDatos(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
 
ajax.open("POST", _pagina, true);
 
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
 
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;
 
}}
ajax.send(null);
}
//]]>
</script>
</head>
<body>
<div id="menu">
<a href="javascript:CargarDatos('golf.html','contenido');">Golf</a><br />
<a href="javascript:CargarDatos('futbol.html','contenido');">Futbol</a><br />
</div>
<div id="contenido">
<!-- aca se carga el contenido de lo clickeado en el menu -->
</div>
</body>
</html>

Una a aclaración, el contenido de las páginas que cargues, no debe repetir los headers, metas, o el tag body. solo e html qie correspponda a los detalles de la sección selecccionada

Saludos

Hectorito · #3 (**permalink**) 22/01/2012, 22:16

Gracias amigo pero no me funciono del todo. La verdad cero de ajax pero creo q comprendo lo que se quiere hacer. le muestro mi codigo para mas claridad.

Código:


function CargarDatos(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
 
ajax.open("POST", _pagina, true);
 
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
 
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;
 
}}
ajax.send(null);
}

tengo este div

Código:

<div id="content">
</div>

pero ps lo que coloque ahi me lo carga automoticamente en la pagina sin presionar ningun item si presiono algun item por el contrario qda en blanco

yo en el css le puse hidden al div para solucionarlo temporalmente

esto es algo de como invoco el metodo cargarDatos

Código:

<li> <a href="javascript:CargarDatos('D:/Programas/eclipse-jee.indigo/workspace/PeriodicoKnow/WebContent/img/auto.jpg', 'content');">Automovilismo</a><br /></li> 
<li><a href="javascript:CargarDatos('img/aje.jpg','content');">Ajedrez</a><br /></li>
>

he intentado de todo la ruta completa la ruta corta, cargar la imagen desde otra pagina sin el head y lo q ud me dijo de mas, pero nada, no funciona...

ud dice q en el div debo colocar lo q quiero cargar lo coloco pero me lo carga automaticamente, lo doy hidden pero sigue igual me lo oculta pero no pasa nada al darle click en el item, he creado div por categoria y nada me los monta todos a la vez, no se si estoy mandando mal los parametros al metodo CargarDatos o como es que estoy haciendo mal...

gracias de antemano

emprear · #4 (**permalink**) 22/01/2012, 23:13

Si funciona

http://foros.emprear.com/ajax/demo/

Pero si lo ejecutas desde el explorador de windows y no desde un servidor, te va a funcionar en Firefox, pero no en IE.

Saludos

Hectorito · #5 (**permalink**) 22/01/2012, 23:52

no ya entendi, ya probe en el div y si le inserto algo. me encaja a la perfeccion donde quiero q este en la pagina, de todas formas por css le doy parametros, ahora bn, me sigue sin funcionar y lo q hace es q en el href coloca lo q retorne ese metodo CargarDatos y lo coloca en la capa osea en el div content y ya revise muy bien y deberia de funcionar, lo probe de las dos formas que hay para referenciar la fuente y nada..

Código:

<li> <a href="javascript:CargarDatos('D:/Programas/eclipse-jee.indigo/workspace/PeriodicoKnow/WebContent/img/auto.jpg','content');">Automovilismo</a><br /></li> 
<li><a href= "javascript:CargarDatos('img/aje.jpg','content');">Ajedrez</a><br /></li>

podria ser error en el codigo q ud me facilito...o que error puedo estar cometiendo

gracias!

emprear · #6 (**permalink**) 23/01/2012, 00:11

El código es el mismo que el de la demo que pasé recién, baja esas páginas si queres y proba con esas

SAludos

Hectorito · #7 (**permalink**) 23/01/2012, 00:29

Internet Explorer nunca lo utilizo...

siempre lo he corrido en firefox y chrome y sale igual...

no se que pueda estar pasando..

Hectorito · #8 (**permalink**) 23/01/2012, 00:49

listo viejo ya me funciono...mil gracias... a estudiar ajax y javascript te se sacan de apuros..solo funciona en Firefox, Chorme no sirve, ademas no se le puede pasar una imagen sino una pagina...era ese pequeño detalle una semana solo en eso, que tristesa pero de los errores se aprende..

una ultima pregunta, hay forma de que se pueda pasar la imagen y no la pagina..quizas en esta parte

Código:

 document.getElementById(capa).innerHTML =
ajax.responseText;

podria existir algun elemento llamado ajax.responseImage o ajax.responsePicture algo asi para no crear mas de 30 paginas?

mil gracias por su tiempo

salu2

emprear · #9 (**permalink**) 23/01/2012, 01:08

Vamos a redondear cosas, como funcionar, funciona en todos los navegadores, pero si no lo subis a un server, es decir, abriendolo solo desde el explorador de windows, en IE no te funciona.

Si queres mostrar una imagen, tendrias que cargar un html que contenga
<img src="foto.gif" alt="" />, tan solo eso, si queres cargar una imagen directamente, podés, pero verías algo asi

GIF89a��BBBbbb��!�NETSCAPE2.0!�Created with ajaxload.info!� ,3��0�Ik

Que es el código binario de la imagen, esa podría ser la forma de precargar contenido, pero tendrías que hacerlo en una capa oculta, por ejemplo, con

#capaoculta{
display:none;
}

CargarDatos('img/aje.jpg','capaoculta');

Saludos

Hectorito · #10 (**permalink**) 23/01/2012, 10:57

gracias pero no me funciono

Código:

#content{
width: 1250px;
margin: 0 auto;
background: #c3d5df;
border: 1px solid #d1d0ad;
padding: 5px 0;
min-height: 100%;
height: auto !important;
display: none;

}

Código:

 <li><a href= "javascript:CargarDatos('img/aje.jpg','content');">Ajedrez</a><br /></li>

no me sale nada.

pero no importa creare las paginas..

ahora bien hay forma de que funcione en todos los exploradores ya se q soporta opera safari y firefox, pero chrome e IE no, o por lo menos q funcione en chrome..

gracias de nuevo

emprear · #11 (**permalink**) 23/01/2012, 11:15

En que quedamos

Cita:

listo viejo ya me funciono...mil gracias... a estudiar ajax y javascript te se sacan de apuros

ó

Cita:

gracias pero no me funciono

Hectorito · #12 (**permalink**) 23/01/2012, 11:56

Cita:

Iniciado por emprear

En que quedamos

ó

jeje ok, ajax si me funciono, pero la ultima parte de cargar las imagenes no..valga la aclaracion.

ahora quiziera saber si lo puedo hacer funcionar en otros exploradores por lo menos chrome

Hectorito · #13 (**permalink**) 23/01/2012, 12:53

Listo ya corre en todos los navegadores.

para los que tengan ese problema, se debe correr en un servidor asi sea localmente, yo use apache TomCat

Emprear Mil gracias por su tiempo