Foros del Web » Creando para Internet » HTML »

Insertar contenido en una capa

Estas en el tema de Insertar contenido en una capa en el foro de HTML en Foros del Web. Hola... tengo una duda sobre el contenido que se puede mostrar en una capa... Estoy montando una web... y me gustaría, cargar el contenido en ...
  #1 (permalink)  
Antiguo 30/01/2010, 19:20
 
Fecha de Ingreso: junio-2007
Mensajes: 58
Antigüedad: 17 años, 4 meses
Puntos: 0
Insertar contenido en una capa

Hola... tengo una duda sobre el contenido que se puede mostrar en una capa...

Estoy montando una web... y me gustaría, cargar el contenido en una capa.

Voy a explicarles a lo que me refiero:

Antes, para cargar contenidos, creaba un iframe, y dentro de este, se cargaban los contenidos de la web; pero es un poco engorroso pues, el iframe tiene unas medidas y el contenido se debe mostrar dentro de ellas.

Lo que me gustaría, es poder mostrar los contenidos dentro de una capa principal, con una anchura determinada, y la altura automática, dependiendo del contenido; así, al pulsar el botón A el contenido de un documento html debe mostrarse en la capa principal; al pulsar el botón B, el contenido de B debe mostrarse en la capa principal...

Como si de un iframe se tratara. Hay alguna manera de hacerlo ?

Saludos
  #2 (permalink)  
Antiguo 31/01/2010, 05:55
 
Fecha de Ingreso: junio-2007
Mensajes: 58
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Bueno; he encontrado una solución para todos aquellos, que quieran cargar contenidos dentro de una capa !

busqué, y encontré un código que permite hacerlo ...


Deben insertar este código dentro de la etiqueta HEAD de la página web
Código:
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
Y luego, en el link que se debe pulsar, para mostrar el contenido en la página, deben poner este código

Código:
<a href="javascript:ajaxpage('ARCHIVO A MOSTRAR', 'NOMBRE DE LA CAPA');">test</a>
Saludos a todos
  #3 (permalink)  
Antiguo 20/06/2010, 15:48
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Hola NIÑEROLA!
He visto tu código "insertar contenido en capa" y lo he probado en mi PC y no me funciona, sólo he modificado <a href="javascript:ajaxpage('ARCHIVO A MOSTRAR', 'NOMBRE DE LA CAPA');">test</a>
por <a href="javascript:ajaxpage('prueba.html', 'capa1');">Prueba</a>
he copiado el siguiente código en el archivo stylos.css.
#capa1 { position:absolute; left:200px; top:100px; z-index:-1; background:#2887B3; width:110px; height:260px; }

No sé dónde tengo el error.
Gracias
  #4 (permalink)  
Antiguo 20/06/2010, 16:03
 
Fecha de Ingreso: junio-2007
Mensajes: 58
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Insertaste el código indicado entre las etiquetas head ?

Tu archivo es prueba.html o prueba.htm ?


PD: es posible que alomejor no puedas ver el contenido en el pc, prueba a subirlo al servidor y mira si allí se ve.

PD2: yo en mi página web, definí el ancho de la capa, pero no el alto: el alto va según el contenido. puedes ver un ejemplo en www.rossell.es/banda -> una vez hayas elegido el idioma, la barra menú donde se encuentran las diferentes secciones de la web, cargan el contenido en la capa central, si te fijas, solamente se carga nuevo contenido en la capa central, y ésta varia el tamaño según el contenido de las diferentes páginas.

Saludos
  #5 (permalink)  
Antiguo 20/06/2010, 16:29
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 4 meses
Puntos: 310
Respuesta: Insertar contenido en una capa

Ché visca el baix maestrat!
  #6 (permalink)  
Antiguo 20/06/2010, 19:41
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 5 meses
Puntos: 45
Respuesta: Insertar contenido en una capa

Hola Niñerola y laszarzitas

Si haces la prueba en máquina local y usas iexplorer no te funciona por motivos de seguridad del explorador (pero funciona perfectamente en línea). Si lo cargas con opera o firefox (por ejemplo) funciona también en local.

Te dejo la construcción completa del ejemplo de Niñerola:

Código HTML:
<!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=utf-8" />
<title>test</title>
<style type="text/css">
#portacontenidos {
	width: 60%;
	margin: 0 auto;
	border: 1px dotted #444;
}
</style>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
</head>

<body>
<a href="javascript:ajaxpage('contenido1.html', 'portacontenidos');">test</a>

<div id="portacontenidos">Aquí se mostraran los contenidos</div>

</body>

</html> 
Sólo tienes que cambiar el nombre de tus páginas.

Ah! recuerda que las páginas que se cargan con ajax no deben ser completas, sólo deben llevar el contenido del div (sin cabeceras ni head, body etc).

Bye
  #7 (permalink)  
Antiguo 21/06/2010, 03:24
 
Fecha de Ingreso: junio-2007
Mensajes: 58
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Comentarte también, una cosa que me pasó. Si en el CSS del div defines el color del texto, tamaño del texto, color de fondo... etc etc, te lo aplica a todas las páginas que se cargan dentro del mismo div.

Comentartelo para que no te mates aplicando estilos a las páginas de contenido.

Saludos
  #8 (permalink)  
Antiguo 21/06/2010, 05:53
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Hola Deirdre y Niñerola, Primero muchas gracias por vuestras respuestas, el problema está como muy bien comentáis en Internet explorer, lo he probado en Firefox y Opera y claro que funciona.
Bueno ahora es cosa de pulir la capa1.
Me imagino que de igual manera puedo ver en esa capa una imagen, un enlace, una tabla etc etc, voy a probar y ya os contaré.
Quiero llegar a mostrar en dicha capa una imagen desde un menú dinámico con distintos subniveles, que al pasar el ratón ademas del link me muestre una imagen.
Gracias a todos.
Por cierto habrá alguna solución para IE.?
  #9 (permalink)  
Antiguo 21/06/2010, 06:40
 
Fecha de Ingreso: junio-2007
Mensajes: 58
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

En IE cuando subas la página web a tu servidor, te funcionará correctamente.

Puedes hacer de todo, pero ten cuidado con los enlaces relativos al documento (por ejemplo... si en el documento contenedor de la capa utilizas un archivo que se encuentra en un nivel superior deberás escribir \..\nombre-archivo ... pero al cargarlo en la capa, busca el archivo en el nivel superior a la capa; me explico

public_html
- index.html
-imagenes
-- imagen1.jpg
-contenido
--contenido1.jpg

Si en el archivo contenido1.jpg tienes un enlace a la imagen1.jpg (\..\imagenes\imagen1.jpg), como el archivo contenido 1 se encuentra en una subcarpeta de la principal (ppal = donde se encuentra el archivo con la capa contenedora), al cargar el contenido 1, la ruta de la imágen, la buscará en una carpeta superior a la que se encuentra el archivo con la capa contenedora (\..\..\imagenes\imagen1.jpg) y entonces te daría un error.

Más que nada te recomiendo esto para que no uses muchas subcarpetas... que tengas todos los archivos al mismo nivel

Saludo
  #10 (permalink)  
Antiguo 23/02/2011, 03:56
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Insertar contenido en una capa

Hola Deirdre y Niñerola, he estado fuera una temporada (larga, verdad), gracias por vuestra ayuda, todo funciona perfectamente.

Etiquetas: contenido, capas
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 2 personas




La zona horaria es GMT -6. Ahora son las 11:08.