Cambiar dinamicamente CSS con JS, Cambiar alto de página

ylodis · #1 (**permalink**) 27/01/2010, 10:51

Hola,

Intento cambiar una propiedad CSS cada vez que se carga la página o se hace resize (pf11). En HTML tengo :

Código:

<body onresize="comprobarAlto()">

y en el HEAD cargo el siguiente fichero :

Código:

<!--//--><![CDATA[//><!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
  
//Ajustar alto y flechitas del Navegador
function comprobarAlto() { 
  if (window.innerHeight){ 
     //navegadores basados en mozilla 
     espacio_iframe = window.innerHeight - 100
  }else{ 
     if (document.body.clientHeight){ 
        //Navegadores basados en IExplorer, es que no tengo innerHeight 
         espacio_iframe = document.body.clientHeight-40
     }else{ 
         //otros navegadores 
         espacio_iframe = 485
     } 
  } 
  
//  alert('altura Total :'+window.screen.height)
//  alert('altura Disponible :'+window.screen.availHeight)
  
alturaDisp = espacio_iframe + "px";
regla=(navigator.appName.indexOf("Microsoft")!=-1)?document.styleSheets[0].rules:document.styleSheets[0].cssRules;
regla[3].style.height=alturaDisp;

} 

//--><!]]>

No se porque funciona bien con IE7, pero no con Mozilla o Chone, agradecería cualquier guía porque no soy experto en JS y no entiendo por ejemplo que hace la linea

Código:

regla=(navigator.appName.indexOf("Microsoft")!=-1)?document.styleSheets[0].rules:document.styleSheets[0].cssRules;

que sospecho es la madre del cordero aquí.

ylodis · #2 (**permalink**) 28/01/2010, 02:31

Hola,

Se me olvidaba poner como empieza mi hoja de estilos :

Cita:

html, body {height: 100%; overflow:hidden; margin:0; font-family:verdana; font-size:12px;}

body{ color : #000000;
background-color : #FFFFFF;
scrollbar-face-color : #36695D;
scrollbar-arrow-color : #0F0F0F;
scrollbar-track-color : #009999;
scrollbar-highlight-color : #CCCC00;
scrollbar-3dlight-color : #CCCCCC;
scrollbar-shadow-color : #663300;
}

.contenedor {position:absolute; top:57px; height:100%; width:100%; overflow: auto;}
.contenido{ margin:0;padding-bottom:57px;padding-left:170px;}

A:link {text-decoration:underline;color:blue;}
A:visited {text-decoration:underline;color:#008080;}
A:active {text-decoration:underline;color:red;}
A:hover {text-decoration:underline;color:red;}
A.letraPie:visited {color:#ffff00;}

manyjose · #3 (**permalink**) 28/01/2010, 13:32

mira visita esta pagina aqui te dicen como:

http://pequenassoluciones.co.cc/javascript/Cambiar-Hoja-de-estilo-CSS-con-javascript/

http://pequenassoluciones.co.cc/javascript/Cambiar-tama%C3%B1o-de-un-Div-con-javascript/

ylodis · #4 (**permalink**) 28/01/2010, 16:46

Hola,

Gracias por tu ayuda Mani y felicidades por la web que creo que es tuya, una página dice mucho de un webmaster y la tuya es estupenda, te pasaré algunos códigos para que los publiques.

Ahora es un poco tarde por aquí, mañana probaré la solución que aportas.

ylodis · #5 (**permalink**) 29/01/2010, 04:55

Hola,

Many, he estado mirando con mucha atención la solución que aportas, no obstante, no se adapta bien a mi caso. Si he entendido bien en los ejemplos que aportas cambias la hoja de estilo (eligiendo entre 2 hojas o sea el contenido entero de la hoja) o cambias propiedades CSS dentro de HTML (divs identificadas por id, o sea HTML). Mi caso es que quiero cambiar no toda la hoja de estilos externa sino sólo una parte, una propiedad muy concreta donde declaro el alto del body.
El sentido de todo esto es que cree mi web inicialmente con marcos (frames) de HTML y por razones de posicionamiento, acabé montando una especie de seudomarcos con CSS y JS para conservando el diseño, incluir en un sólo fichero los menus y cabeceras. Conseguí mantener la apariencia anterior, pero la barra de scroll acaba demasiado abajo y es lo que quiero arreglar cambiando dinamicamente la propiedad del alto del body al cargar la página y de esa forma adaptar el espacio disponible a cada navegador.

Creo que en el código que tengo, la madre del cordero está en estas lineas, invito a cualquiera que controle JS que explique lo que hace y porque sólo he conseguido que funcione en IE, pero no en Mozilla, Chrome, etc.

Código:

alturaDisp = espacio_iframe + "px";
regla=(navigator.appName.indexOf("Microsoft")!=-1)?document.styleSheets[0].rules:document.styleSheets[0].cssRules;
regla[3].style.height=alturaDisp;

Many confirma que la web que aportas de ejemplo es tuya y te daré todos los detalles que necesites.

manyjose · #6 (**permalink**) 29/01/2010, 12:02

claro es mia, la estoy haciendo para ayudar a todoss los que la necesiten, y cualquiera puede agregar codigos.

mira:

//aqui configuras la altura:
alturaDisp = espacio_iframe + "px";

//aqui va a ver si el navegador es de microsoft o no,
//si es asi: document.styleSheets[0].rules
//sino: document.styleSheets[0].cssRules

regla=(navigator.appName.indexOf("Microsoft")!=-1)?document.styleSheets[0].rules:document.styleSheets[0].cssRules;

//y ya para terminar le asigna el alto que configuras al inicio
regla[3].style.height=alturaDisp;

manyjose · #7 (**permalink**) 29/01/2010, 12:04

me gustaria ver bien la pagina para asi decirte mejor como hacerlo

ylodis · #8 (**permalink**) 29/01/2010, 13:30

Hola,

La página es : http://www.portaltarot.com/

ylodis · #9 (**permalink**) 29/01/2010, 13:33

En la expliczción que das entiendo que una linea es una especie de IF compactada, no la había visto en el manual de JS que leí, ¿ puedes explicar esa forma de codificar o citar algún manual que trate es tema ?.

En cuanto a mi página, obserba el scroll.

manyjose · #10 (**permalink**) 30/01/2010, 12:15

ese ? se llama operador condicional, y si es como un if.

Condicion ? lo que quieres que haga si se cumple : lo que pasara si no se cumple;

manyjose · #11 (**permalink**) 30/01/2010, 12:20

ok si ya vi que no sale la flecha de abajo verdad, deja veo a ver si funciona una solucion que tengo en mente

manyjose · #12 (**permalink**) 30/01/2010, 12:31

mira al div que tiene como class: contenedor ponle un ID que se llame tambien: contenedor

id="contenedor"

<script type="text/javascript">
function tam() {document.getElementById('contenedor').style.heigh t = resta+'px';}
var resta = window.innerHeight-57;
window.onload = tam();
window.onresize = tam();
</script>

cala eso

ylodis · #13 (**permalink**) 01/02/2010, 04:12

Hola,

No veo que funcione y ademas en IE7 se desplaza el "seudomarco principal" unos 10 pixeles a la derecha.
Dime que ficheros necesitas y te los mando a tu página web.