problema <iframe> que tapa un <div>

Pelirr · #1 (**permalink**) 03/08/2011, 09:26

Hola, tengo una etiqueta <iframe> en mi jsp, en la parte de abajo. En la parte de arriva tengo unas etiquetas <div>, una con un menú, otra con una imágen, etc. Mi problema es que una vez se carga el <iframe>, si yo pincho en el menú desplegable de la parte superior de la jsp, se queda por debajo del <iframe> y no puedo ver el menú, me lo tapa el <iframe>. He estado mirando en internet, y hay soluciones como utilizar la propiedad z-index de los <div> para que se vea el menu por encima, o la propiedad allowtransparency="allowtransparency" dentro del <iframe>, pero o no sé como ponerlo o no me funciona. Aquí os dejo el código de la jsp a ver si alguien me puede orientar:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page contentType="text/html; charset=utf-8" %>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>AODB</title>
		
		<link href="../../web/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
		<link href="../../web/css/login.css" rel="stylesheet" type="text/css" />
		<link href="../../web/css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
		<link href="../../web/css/dropdown/themes/default/default.ultimate.css" media="all" rel="stylesheet" type="text/css" />
		<link href="../../web/css/Clistados.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" src="<s:url value="/js/jquery-1.4.2.min.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery-ui-1.8.12.custom.min.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/comun.js"/>"></script>
		
		<script type="text/javascript">

			function searchReport()
			{
				var typeList = '<s:property value="%{typeList}" />';
				//comprobamos que la fecha tenga el formato adecuado
				var fechaValida = "";
				var fechaAComprobar = document.getElementById("reportDate").value;
		  		if (fechaAComprobar != "" )
		  		{
		  			fechaValida = validarFechaSinHora (fechaAComprobar);

		  			if (fechaValida == "true" || fechaValida == "")
					{
		  				var operacionSeleccionada = $(document).find('#selectOperacion').val();
		  				var titulo = '';
		  				if (operacionSeleccionada == 'todas')
		  				{
			  				if (typeList == "operacionesDiarias")
			  				{
		  						titulo = "<s:text name="reportTitleDailyOperations"/>";
			  				}
			  				if (typeList == "mediosDiarios")
			  				{
			  					titulo = "<s:text name="reportTitleDailyResources"/>";
			  				}
		  				}
		  				if (operacionSeleccionada == 'llegadas')
		  				{
		  					if (typeList == "operacionesDiarias")
			  				{
		  						titulo = "<s:text name="reportTitleDailyArrOperations"/>";
			  				}
			  				if (typeList == "mediosDiarios")
			  				{
				  				titulo = "<s:text name="reportTitleDailyArrResources"/>";
			  				}
		  				}
		  				if (operacionSeleccionada == 'salidas')
		  				{
			  				if (typeList == "operacionesDiarias")
			  				{
		  						titulo = "<s:text name="reportTitleDailyDepOperations"/>";
			  				}
			  				if (typeList == "mediosDiarios")
			  				{
			  					titulo = "<s:text name="reportTitleDailyDepResources"/>";
			  				}
		  				}
		  				var nombresParametros = '&tituloInforme='+ titulo + 
												'&compania='+ encodeURIComponent("<s:text name="reportTextAirline"/>")+
												'&numeroVuelo='+ encodeURIComponent("<s:text name="reportTextFlightNumber"/>")+ 
												'&fechaProgramada='+ "<s:text name="reportTextScheduledDate"/>"+
												'&estadoActual='+ "<s:text name="reportTextStatus"/>"+
												'&tipoVuelo='+ "<s:text name="reportFlightType"/>"+
												'&tipoAeronave='+ "<s:text name="reportAircraftType"/>"+
												'&numeroAsientos='+ encodeURIComponent("<s:text name="reportNumberSeats"/>")+
												'&numeroPasajeros='+ encodeURIComponent("<s:text name="reportNumberPassenger"/>")+
												'&ocupacion='+ encodeURIComponent("<s:text name="reportOccupancy"/>")+
												'&emptyReport='+ encodeURIComponent("<s:text name="emptyReport"/>") +
												'&maintenance=' + encodeURIComponent("<s:text name="reportMaintenance"/>") + 
												'&startDate=' + encodeURIComponent("<s:text name="reportStartDateMaintenance"/>") +
												'&endDate=' + encodeURIComponent("<s:text name="reportEndDateMaintenance"/>");
						
  						document.getElementById('informe').innerHTML = '<iframe name="informeFrame"  width="1520" height="550"></iframe>';
  						window.parent.frames["informeFrame"].location="/AODB/operacionesDiariasYMens.servlet?reportDateString="+fechaAComprobar+"&typeOperation="+operacionSeleccionada +
  																		"&typeList=" + typeList + nombresParametros;
						//no se podría poner en este caso "<iframe src='/AODB/operacionesDiariasYMens.servlet?reportDateString='+variables width='1400' height='550'></iframe>"
						//debido a las comillas (tanto ' como  "), interfieren y no coge las variables para llevarla al action o al servlet
					}
					else
					{
						if (fechaValida == "errorFormatDateWithoutHour")
						{
							alert("<s:text name="errorFormatDateWithoutHour"/>");
						}
						if (fechaValida == "errorYear")
						{
							alert("<s:text name="errorYear"/>");
						}
						if (fechaValida == "errorMonth")
						{
							alert("<s:text name="errorMonth"/>");
						}
						if (fechaValida == "errorDayOfWeek")
						{
							alert("<s:text name="errorDayOfWeek"/>");
						}
					}
		  		}
		  		else
		  		{
		  			alert("<s:text name="reportDateRequired"/>");
		  		}

				
			}
			
		</script>
		
	</head>

	<body>
		<div id="contenedor">
			<div id="cabecera">
   				<div id="logo">
            		<s:include value="../../jsp/application/menu.jsp"/>
    			</div>
    		</div>	    		
		
			<div id="contenido">
				<div id="info"></div> 
				<div id="banner"></div>
				<div width="95%" align="center">										
					<div width="100%">
						<s:form>
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr height="50px" width="100%">
									<td width="20%" align="center">
										<s:text name="reportDateSelected"/>
									</td>
									<td width="25%" align="center">
										<s:textfield id="reportDate" name="reportDate" maxlength="10" />
									</td>
									<script>
										var fecha = '<s:date name="%{reportDate}" format="dd/MM/yyyy" />';
										document.forms[0].reportDate.value = fecha;
									</script>	
									<td width="15%" align="center">
										<s:text name="typeFlightSelected"/>
									</td>
									<td width="30%" align="center">
										<s:select name="typeOperation" list="tipoOperacionElegida" value="value" id="selectOperacion"/>
									</td>								
									<td width="10%">
										<s:a href="#" onclick="javascript:searchReport()"><img src="../../web/images/icono_buscar.png" alt="<s:text name="reportSearchButton" />" border="0"/></s:a>
									</td>
								</tr>
							</table>
						</s:form>
					</div>
					<div id="informe">
					</div>
				</div>			
			</div>				
		</div>		
	</body>
	
</html>

Muchas gracias, un saludo

diegovazgonz · #2 (**permalink**) 03/08/2011, 11:20

prueba con el z-index de css

Pelirr · #3 (**permalink**) 04/08/2011, 02:48

Hola, estoy probando y me estoy volviendo loca, no funciona nada. He probado a cambiar los estilos en los archivos css y dejarlos como sigue:

[QUOTE]
...
#cabecera{
position: relative;
z-index: 10;
top: auto;
left: auto;
width: 1520px;
}

#contenido{
position:relative;
float: left;
width: 1520px;
...
[QUOTE]

y en la jsp:

Como tengo varios <a href>, uno de un botón para generar el informe con id= generarInforme y el resto del menú, intento que al pasar con el ratón sobre el menú el contenido de la etiqueta <div id="contenido"> , que es dónde está incluída la etiqueta <div id="informe"> donde alojo al <iframe>, queda debajo del resto:

Código HTML:

...
</html>
<script type="text/javascript">
 $("a").mouseover(function()
{
  var valorId = $(this).attr('id');
  if (valorId != 'generarInforme')
 {
    $(document).find('contenido').css('z-index', '-1');
  }
});

pero al desplegar el menu sigue cortándose a la altura del <iframe>.

Tb había probado a ir poniendo a todas las <div> de la jsp un z-index en la hoja de estilos css, cada vez menor hasta llegar al <div id="informe"> al cual le ponía -1, pero tampoco funciona. Y no puedo poner directamente en la hoja de estilos al estilo contenido z-index:-1 porque entonces no puedo acceder a ningún valor del div, los campos se quedan sin poder acceder a ellos.

¿Habrá algo especial para el <iframe>? Yo aún no lo he encontrado. Si alguien puede echarme un cable lo agradecería.

Muchas gracias
</script>

chrishxc · #4 (**permalink**) 04/08/2011, 06:07

El otro día me pasó lo mismo con un flash. Al final la solución fué de lo más simple. Cambié la posición de los divs en la hoja de estilos: ahora no me acuerdo que no estoy en casa, pero puse la del flash antes/después que la del contenido, y por arte de magia se solucionó.

La verdad es que me dejó impresionado solucionarlo así después de una hora de búsquedas por mi código, internet..

Pelirr · #5 (**permalink**) 04/08/2011, 07:54

Hola, el fichero css es este:

Código:

@charset
"utf-8"
;
/* CSS Document */

body {
    margin: 0;
    background-color: #eae9e9;
    font-family: Arial, Helvetica, sans-serif;
}

h2 {
    font-weight: bolder;
}

#contenedor {
    width: 1520px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#cabecera {
    width: 1520px;
}

#cabecera #logo {
    float: left; /*width:100px;*/
    font-size: 14px;
    font-weight: bolder;
    font-variant: normal;
}

#cabecera #logo #a {

}

#cabecera #menu {
    float: center;
    width: auto;
}

#login {
    float: left;
    width: 420px;
    background-color: #000000;
}

#contenido {
    float: left;
    width: 1520px;
    background-image: url(../images/bg_imagen.png);
    background-repeat: repeat-x;
}

#contenido #info {
    width: 100%;
    background-image: url(../images/info.png);
    height: 35px;
    background-position: center;
}

#contenido #principal {
    float: left;
    width: 370px;
    background-color: #000000;
    height: 292px;
}

#contenido #secundario {
    float: left;
    width: 1040px;
    height: 292px;
}

#contenido #down {
    width: 100%;
    background-image: url(../images/bg_down.png);
    background-repeat: repeat-x;
    height: 96px;
}

#contenido #downpies {
    float: left;
    width: 369px;
    height: 80px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #999999;
    margin: 5px;
}

#pie {
    clear: both;
    height: 35px;
    background-image: url(../images/pie.png);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    background-repeat: no-repeat;
}

#formulario {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    height: auto;
    width: auto;
    margin-top: 35px;
    margin-right: 50px;
    margin-bottom: 70px;
    margin-left: 60px;
}

form.formato input {
    margin: 0.4em;
    padding: .2em
}

.label {
    display: block;
    margin: 5px 0 0 0;
}

.btn {
    display: block margin: 1em 0;
}

div {
    margin: 0px;
}

div label {
    width: 100%;
    float: left;
}

.input1 {
    display: block margin: 1em 0;
    width: 30px;
}

.inputfecha {
    display: block margin: 1em 0;
    width: 120px;
}

.inputvuelo {
    display: block margin: 1em 0;
    width: 80px;
}

He probado a poner primero #contenido y después #cabecera, pero me sigue pasando lo mismo. Tb he probado a poner el atributo AllowTransparency en el iframe pero tampoco. No encuentro la manera de solucionarlo. Antes de que se cargue el <iframe> el menú se visualiza bien, pero una vez insertado es como si no fuera con él todo lo que pongo. Por si sirve de algo, dentro del iframe lo que cargo es un informe de jasperreport, en formato pdf. Si alguien me puede orientar sobre ésto sería una gran ayuda.

Un saludo

repsa · #6 (**permalink**) 28/10/2011, 10:09

a mi me pasa lo mismo, pero solo con el maldito IExplorer pero con cualquier otro navegador no tengo ningun problema!.. Chrome, Firefox, Opera esos son con los que me ha funcionado perfectamente!!

Pelirr · #7 (**permalink**) 31/10/2011, 01:32

Pues tengo que utilizar el IExplorer, así que mal asunto. Al final lo que se ha hecho es cambiar el menú, para que en lugar de en vertical salga en horizontal y así quepa dentro del espacio que hay encima del iframe. De todos modos me dá mucha rabia no haber encontrado una solución mejor.

Gracias a todos por la ayuda.

Un saludo