Alto de DIV segun resolucion

shakaran · #1 (**permalink**) 31/08/2006, 14:33

Hola, tengo un div, que segun la resolucion que tenga el usuario, quiero que sea de un tamaño u otro. Lo he intentado hacer con una funcion, pero no consigo que me devuelva bien el alto, para ponerlo en el "height" del div. Luego he intentado llamado a distintas class de css, y nada, alguien me puede ayudar?

Este es el source:

<SCRIPT language="javascript" type="text/javascript">
function tmenu(){
var h=window.screen.height
var clase
if(h==1024)//Altura de pantalla 1024
{
clase="vScroler1"
}else if(h==960){//Altura de pantalla 960
clase="vScroler2"
}else{//Otra Altura de pantalla
clase="vScroler3"
}
document.write(clase)
}
</SCRIPT>
<div id="vScroller1" class="tmenu()">Texto</div>

Un saludo y gracias

skaperna · #2 (**permalink**) 01/09/2006, 01:07

Hola,

lo que puedes hacer, es cambiar la regla de esa clase del siguiente modo:

Código PHP:

  function tmenu()

{

var theRules = new Array();

// Según el navegador

if (document.styleSheets[0].cssRules)    theRules=document.styleSheets[0].cssRules;

else if (document.styleSheets[0].rules)  theRules=document.styleSheets[0].rules; 

 
var h=window.screen.height;

 
// X representa el número de la regla (o la posición) correspondiente en tu .css para el DIV, en este ejemplo a la classe "div_general". Empiezan desde 0.

 
if(h==1024)      theRules[X].style.height = 1024;

else if(h==960) theRules[X].style.height = 960;

else                theRules[X].style.height = "lo que sea";

 
}

Así, lo que haces es cambiar directamente en el archivo .css la altura de la clase que corresponde a tu div. Deberías poner la llamada de tmenu() en un onload en el body, tal que así:

< body onload="tmenu()">

y en tu div:

<div id="vScroller1" class="div_general">Texto</div>

Espero que te sirva

Skaperna

shakaran · #3 (**permalink**) 01/09/2006, 02:09

Hola gracias!

Estoy probando tu codigo(desconocia la propiedad styleSheets XD) y como no sabia el numero "X" o posiciones de css que tenia, le añadi lo siguiente:

var tRules=theRules.length;
alert("Css totales: "+tRules);

Me dio como resultado 2 (luego son 3, contando el 0). Loque quiero saber y para mejorar aun mas la funcion es si puedo sacar los nombres de dichas posiciones.

He probado con esto:

var nomRules=theRules[0].title;
alert("nombre del css 0: "+nomRules);

y tambien:

var nomRules=theRules[0].name;
alert("nombre del css 0: "+nomRules);

y tambien:

var nomRules=theRules[0].value;
alert("nombre del css 0: "+nomRules);

Pero nada XD Cual es la propiedad para ello? Me podeis facilitar algun manual donde se defina(a ser posible en español) todas las propiedades de "styleSheets para rules"

Gracias

skaperna · #4 (**permalink**) 01/09/2006, 02:33

Hola,

si quieres acceder a las reglas por nombre, puedes hacerlo poniendo un id en tu div y luego accediendo a la clase de tu div mediante el identificador de la siguiente manera:

document.getElementById('div_id').style.height= "loquesea";

teniendo :
<div id="div_id" class="div_general">

No hay ningún manual especifico... todo esto lo averigué intentando cambiar el tamaño del texto y que funcionarà en IE, Firefox, Netscape, Safari, Camino y Opera.

Tal y como està en el primer post, te funcionará para todos menos para Opera (ya que no acepta styleSheets , pero funciona con el método que te acabo de poner).

Skaperna

shakaran · #5 (**permalink**) 01/09/2006, 02:59

Estoy en firefox y no consigo que me funcione la parte que le pone el height, ni de una manera ni de otra. Mira te dejo todo igual que yo tengo puesto para el ejemplo y asi a ver si vemos el error:

Código:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.div_general {
height:100px;
border: 3px solid #FF0000
}
</style>
<script language="javascript" type="text/javascript">
function tmenu()
{
var theRules = new Array();
// Según el navegador
if (document.styleSheets[0].cssRules)    theRules=document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules)  theRules=document.styleSheets[0].rules; 

var h=window.screen.height;
//var tRules=theRules.length;
	//alert("numero de css: "+tRules);
// X representa el número de la regla (o la posición) correspondiente en tu .css para el DIV, en este ejemplo a la classe "div_general". Empiezan desde 0.

if(h==1024) document.getElementById('div_id').style.height= 500//      theRules[0].style.height = 1024;
else if(h==960) //theRules[0].style.height = 960;
else                //theRules[0].style.height = 250;
//document.getElementById('div_id').style.height= "loquesea";
}  
</script>

</head>

<body onload="tmenu()">
<div id="div_id" class="div_general">Div</div>
</body>
</html>

skaperna · #6 (**permalink**) 01/09/2006, 03:23

Hola,

te recomiendo que lo hagas por el primer método... si solo tienes una regla, entonces la X debería ser 0.

También deberías ponerle en el height el px (no se si es eso, pero prueba por si acaso...)

Skaperna

shakaran · #7 (**permalink**) 01/09/2006, 03:29

Efectivamente...le faltaba el px(de los dichosos pixeles XD). Ahora funciona perfectamente con el getElementById XD

Lo hago por el getElementById,porque tengo 3, pero luego hace un include en otra pagina y hay como 25 ;)

Bueno duda resuelta XD

Muchas gracias por todo