Problema detectando el alto

mdk · #1 (**permalink**) 09/07/2009, 06:39

Veamos, tengo una página en la que quiero que una capa, ocupe tanto el ancho y alto visible del navegador. Para ello, creo una capa, sin asignarle nada, para que posteriormente una vez cargada la página le asigne las posiciones y dimensiones. Pero, no lo hace correctamente. Tengo este codigo:

Index.php

Código PHP:

  <?php header("Cache-Control:no-cache,must-revalidate"); ?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<?php 
error_reporting(E_ALL); 
?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Pagina</title> 
</head> 
<noscript><center><strong>La página no se visualizará.</strong> No tienes activado JavaScript. Para ver correctamente la página debes de activarlo. Disculpen las molestias.</center></noscript> 
<script language="JavaScript" src="scripts/script.php"></script> 
 
<body scroll="no" style="margin: 0;"> 
<div id="BackGround" style="background-color: #FF0000;" class="CBackground"></div> 
<script type="text/javascript"> 
window.onload = LoadIni(); 
</script>

Y el archivo script.jp que contiene el código javacript.

Código:

function LoadIni() {
	LanzVars();
	alert(DocHeight);
	MountLayer(0, 0, DocWidth, DocHeight, 'BackGround');
}
function LanzVars() {
	DocHeight = 0; DocWidth = 0;
	if (window.innerHeight) { 
		DocHeight = window.innerHeight;
	}else{
		if (document.body.clientHeight) { DocHeight = document.body.clientHeight; }
	}
	if (window.innerWidth) { 
		DocWidth = window.innerWidth;
	}else{
		if (document.body.clientWidth) { DocWidth = document.body.clientWidth; }
	}
} 
function MountLayer(PosLeft, PosTop, TWidth, THeight, Layer) {
	ObjDiv = document.getElementById(Layer);
	ObjDiv.style.visibility = "visible";	
	ObjDiv.style.position = "absolute";
	ObjDiv.style.left 	 = PosLeft;
	ObjDiv.style.top 	 = PosTop;
	ObjDiv.style.width	 = TWidth;
	ObjDiv.style.height	 = THeight;
	ObjDiv.style.backgroundColor = "red";
}

Alguien sabe decirme que estoy haciendo mal?

Saludos, y gracias de antemano.

quimfv · #2 (**permalink**) 09/07/2009, 07:12

Window size and scrolling

Código js:

Ver originalfunction alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Esto funciona tanto en IE como FF luego mira que puedes adaptar....

Una buena referencia .... el problema que tienes lo esta generando creo las diferencias entre navegadores...

Quim

mdk · #3 (**permalink**) 09/07/2009, 08:51

Vale, muchisimas gracias, ahora hace exactamente lo que deberia de hacer, pero ahora en internet explorer me da el siguiente error en la linea 14:

No Implementado.

Y luego en firefox tambien me da 2 errores, y no me pinta el fondo de la capa de color rojo como en internet explorer. Y los dos errores son los siguientes:

Error al leer el valor para la propiedad 'width'. Declaración rechazada.
(Aqui la direccion del archivo)
Error al leer el valor para la propiedad 'height'. Declaración rechazada.
(Aqui la direccion del archivo)

Asi, tal cual me lo pone la consola de errores del firefox.

El archivo script.js lo deje asi al final:

Código:

function LoadIni() {
	LanzVars();
	MountLayer(0, 0, DocWidth, DocHeight, 'BackGround');
}
function LanzVars() {
	DocHeight = 0; DocWidth = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//No-IE
		DocWidth = window.innerWidth;
		DocHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ en modos standar
		DocWidth = document.documentElement.clientWidth;
		DocHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		DocWidth = document.body.clientWidth;
		DocHeight = document.body.clientHeight;
	}
} 
function MountLayer(PosLeft, PosTop, TWidth, THeight, Layer) {
	ObjDiv = document.getElementById(Layer);
	ObjDiv.style.visibility = "visible";	
	ObjDiv.style.position	= "absolute";
	ObjDiv.style.left 		= PosLeft;
	ObjDiv.style.top 		= PosTop;
	ObjDiv.style.width		= TWidth;
	ObjDiv.style.height		= THeight;
	ObjDiv.style.backgroundColor = "red";
}

Así que que deberia de hacer para que no me salieran errores y en firefox me pinte el fondo de la capa de rojo como he puesto?

mdk · #4 (**permalink**) 09/07/2009, 10:19

Solucionado, el javascript del final, tengo que ponerlo sin parentesis:

<script type="text/javascript">
window.onload = LoadIni;
</script>

Saludos.