Problemas con estandares en navegador Opera

[skaperna]

Hola a todos,


os explico mi problema... tengo una pagina metida en un div en la cual ha de haber la opción de poder subir o bajar el tamaño de la letra que sale por defecto. Esto lo hago a través de 3 letras " a a a ", a través de una función de javascript.

La cosa està en que debe funcionar en los siguientes navegadores:

IE, firefox, Netscape, Safari y Opera.

Para todos, menos en Opera, utilizo lo siguiente:

Código PHP:

  ... // funcion de javascript con parametro whichSheet 
var theRules = new Array(); 
        if (document.styleSheets[0].cssRules)    theRules = document.styleSheets[0].cssRules; 
        else if (document.styleSheets[0].rules)  theRules = document.styleSheets[0].rules;  
 
                // 0 letra por defecto, 1 letra menor, 2 letra mayor 
        if (whichSheet==0)  theRules[1].style.fontSize = '11px'; 
        if (whichSheet==1)  theRules[1].style.fontSize = '10px'; 
                if (whichSheet==2)  theRules[1].style.fontSize = '12px'; 
...  
   

ya que Opera no acepta los "styleSheets"...

Entonces para Opera, había visto en una web ( http://www.quirksmode.org/dom/w3c_css.html )que se podia utilizar el elemento "style" para aplicarle una misma fuente a todo el div que contiene el texto a ser modificado...

Código PHP:

  ... 
               // el div contenedor tiene etiqueta id="contenedor" 
               var x=document.getElementById('contenedor'); 
        if (whichSheet==0)   x.style.fontSize = '11px'; 
        if (whichSheet==1)   x.style.fontSize = '10px'; 
        if (whichSheet==2)   x.style.fontSize = '12px'; 
...  
   

perooooooo me da error

Código PHP:

   Could not convert undefined or null to object  
   

que yo creo que es la declaración de la variable "x".

Es correcto, es incorrecto??? qeu es lo que hago mal???

Gracias por la ayuda
Skaperna

[KnowDemon]

Hola,

Yo también utilizo un script para que el visitante pueda alterar el tamaño del texto en el sitio. No conocía "document.StyleSheets" . Yo altero el tamaño de la fuente seleccionando el body y aplicando el "style" al mismo. Algo como:

mibody.style.fontSize = "13px";

Resulta obvio que todos los tamaños de fuente (y otras cosas) estan en proporciones del tamaño de fuente del body. Asi todos los tamaños cambian al cambiar el tamaño del texto en el body.

No veo le error en tu código. Acaso este en una parte que no hayas publicado.

El sitio en cuestión aparece en mi firma. El script que altera le tamaño se llama tam-fuente.js

[Nigel]

Por lo que dice el error, simplemente no encuentra el elemento contenedor. De todas formas no deberías usar medidas absolutas en el tamaño de los textos. Si usas tamaños relativos, lo único que tienes que hacer es cambiar el del contenedor, y automaticamente todas las fuentes contenidas se adaptan.

Si tienes en css:

Código:

#contenedor{
  font-size:1em;
}

#contenedor h1{
  font-size:1.5em;
}

y en HTML:

Código:

<div id="contenedor">
   <h1>Titulo</h1>
</div>

en javascript es algo tan simple como:

Código:

   var oDiv = document.getElementById("contenedor");
   oDiv.style.fontSize="1.2em";

Automaticamente cambia el tamaño de la fuente del DIV, y del H1 al ser relativo a éste.

Aquí tienes un ejemplo sencillo que espero que te sirva (probado en firefox, opera e IE 6.0): http://mods.solzimer.es/david/examples/fontsize.html

[skaperna]

Muchas gracias a los dos, esta mañana misma probaré las dos opciones y ya contaré como ha ido el tema.

Skaperna

[JavierB]

Movido al foro de JavaScript desde Css.

Saludos,

[skaperna]

Bueno, he conseguido que funcione !!!

Tal y como vosotros lo explicabais, no me acababa de funcionar pq habia omitido decir que dentro del div contenedor tenia otros div's que tenian su propio estilo,
con lo que la final he deducido (no sin esfuerzo) que los estilos interiores no se machacaban con el estilo general, y tampoco los podia poner relativos por otros motivos a parte.

Al final lo he hecho por id de los div's que deberían modificarse. Aquí os dejo el código para que los estilos funciones en IE, Firefox, Netscape, Safari, Opera y Camino (con otros navegadores no he probado).

Código PHP:

   
function switchSheet(whichSheet) 
{ 
        if (!document.styleSheets) 
    {     
        // Opera 
        if (whichSheet==0)   
        { 
            document.getElementById('nombre_id_div').style.fontSize = '11px'; 
                        // tantos id's de div's como quieras cambiar 
        } 
        if (whichSheet==1) 
        { 
            document.getElementById('nombre_id_div').style.fontSize = '10px'; 
                        // tantos id's de div's como quieras cambiar 
        } 
        if (whichSheet==2) 
        { 
            document.getElementById('nombre_id_div').style.fontSize = '12px'; 
                        // tantos id's de div's como quieras cambiar 
        } 
        return;   
    } 
    else 
    {    // Otros 
             // 'x' es el número de la regla en tu hoja de estilos 
        var theRules = new Array(); 
        if (document.styleSheets[0].cssRules)    theRules = document.styleSheets[0].cssRules; 
        else if (document.styleSheets[0].rules)  theRules = document.styleSheets[0].rules;  
 
        if (whichSheet==0)  
        { 
            theRules[x].style.fontSize = '11px'; 
                        // tantas reglas como quieras cambiar 
        } 
        if (whichSheet==1)  
        { 
            theRules[x].style.fontSize = '10px'; 
                        // tantas reglas como quieras cambiar 
        } 
        if (whichSheet==2)  
        { 
            theRules[x].style.fontSize = '12px'; 
                        // tantas reglas como quieras cambiar 
        } 
}  
   

Gracias igualmente!!!!!!!

Skaperna

[skaperna]

Hola de nuevo,

tengo un nuevo pequeño problema... uno de los div's es una capa donde voy añadiendo nuevos div's que corresponde a una conversacion, del tipo:

Código PHP:

  // "Usted" esta en un div con id="globo_user"  
// la pregunta "hola" en otro div con id="respuesta_user" 
// "Robot" esta en un div con id="globo_robot" 
// la respuesta "hola, te responderé a lo que quieras" en otro div con id="respuesta_robot" 
 
Usted > hola                                 
Robot > hola, te responderé a lo que quieras  
   

El problema que tengo es que el usuario puede preguntar tantas veces como quiera, con lo que el robot le contestará otras tantas (y siempre tendrán la misma estructura de div's y de id's), por lo que la función de mi anterior mensaje para cambiarles el tamaño de la letra solo servirà la primera vez que aparezca el div de user y el div de robot.

Hay alguna manera de que pueda poner el

document.getElementById('nombre_id_div_repetido'). style.fontSize = '12px';

y que me canvie el font-size de todos los id's que tengan ese id????


Gracias mil !!!!!!!
Skaperna