cambiar estilo al cargar la página

chiquirf · #1 (**permalink**) 18/07/2008, 04:52

Hola a todos,

Estoy combinando Javascript con PHP para cambiar estilos y que muestre y/o oculte capas al cargar una página, les explico lo que quiero hacer.

En una página recibo de la anterior por POST una variable "CampoAdulto" que puede tener el valor de 1 a 4; con ese valor capturado por PHP quiero mostrar y/o ocultar capas, les pongo unos ejemplos:

* Si CampoAdulto es igual a 1, oculta capa 'Guest2', 'Guest3' y 'Guest4,' y muestra capa 'Text3-4'.
* Si CampoAdulto es igual a 3, oculta capa 'Guest4,' y muestra capa 'Text1-4'.

Estoy poniendo esto en el <head> y no funciona:

Código PHP:

 
<script language="javascript" type="text/javascript">

<!--

 
<?php if ($CampoAdultos == 1){ ?>

    alert("adulto = 1");

    document.getElementById('Guest2').style.visibility='hidden';

    document.getElementById('Guest3').style.visibility='hidden';

    document.getElementById('Guest4').style.visibility='hidden';

    document.getElementById('Text3-4').style.visibility='visible';

<?php }

if ($CampoAdultos == 2) {

?>

    alert("adulto =2");

    document.getElementById('Guest3').style.visibility='hidden';

    document.getElementById('Guest4').style.visibility='hidden';

    document.getElementById('Text2-4').style.visibility='visible';

<?php }

if ($CampoAdultos == 3) {

?>

    alert("adulto = 3");

    document.getElementById('Guest4').style.visibility='hidden';

    document.getElementById('Text1-4').style.visibility='visible';

<?php } ?>

 
//-->

</script>

Los alert() que hay dentro funcionan perfecto, pero no oculta ninguna capa, me sale un error en el IE: "Se esperaba un objeto".

He encontrado que funcione pero no como quiero, y es poniendo todo esto dentro de una función y llamandola con OnLoad en el Body, el problema es que me muestra todas las capas y luego de un segundo me oculta las capas que quiero y eso se ve fatal.

Alguna idea de solucionar esto???

Muchas gracias

Carlos

David · #2 (**permalink**) 18/07/2008, 07:23

Creo que la única solución es hacerlo en el onload, aunque no se vea muy bien, ya que antes de eso los objetos no se han cargado por lo que no te permitirá cambiar su estilo.

chiquirf · #3 (**permalink**) 18/07/2008, 07:38

ok, gracias, no se me habia ocurrido que por eso no funcionaba.

Se me acaba de ocurrir hacerlo al revés, empezar con los campos en hidden y luego mostrarlos... lo probaré y a ver como queda.

Gracias y saludos

buzu · #4 (**permalink**) 18/07/2008, 11:07

claro. EL DOM no esta formado hasta que la pagina ha cargado completamente, por lo que cuando intentas
document.getElementById('Guest2').style.visibility ='hidden';

No hace nada, pues el elemento Guest2 aun no existe. hay que usar el evento onload, pero como dicen, se ve mal. Otra solución es que escribas diferentes estilos que cumplan con los estilos que necesitas según el valor de tus variables. Después, en la cabecera solo escribes una referencia hacia la hoja de estilo y listo, no tendrías que esperara a que la pagina haya cargado y cuando cargue lo hará con los estilos que necesitas. (mmm... buena solucion a un problema que me plantearon antes... )

Saludos.

chiquirf · #5 (**permalink**) 18/07/2008, 13:29

Gracias por la ayuda.

Probe haciendolo "al revés", es decir, ocultando todas las capas en la hoja de estilos y con onload mostrar los que neceito. funcionó a la primera y muy bien, ni se nota el salto.

Gracias a todos