Comando similar a presionar ctrl++

gspablo · #1 (**permalink**) 06/08/2010, 07:43

Buenas, cuando en un explorador como mozilla por ejemplo, nos aparece una página más grande o pequeña de lo normal podemos darle a cnrtl++ o -- para ampliar o reducir lo que estamos viendo

Yo quiero hacer algo similar, poniendo un botón + y otro - para que la gente si lo pulsa se dimensione el contenido a mayor o menos, según lo pulsado

He visto que existe un comando llamado RESIZE, pero tienes que darle el nuevo tamaño, entonces si no se el tamaño actual como voy a darle otro

Alguna forma de saber el tamaño actual?? o alguna forma de hacer la función del cntrl++??

graciasss

Adler · #2 (**permalink**) 06/08/2010, 08:12

Hola

Deja que @JavierB te diga como se hace

Suerte

gspablo · #3 (**permalink**) 06/08/2010, 08:58

Si no me equivoco en ese ejemplo lo que se hace es cambiar la fuente, yo lo que quiero es que se cambie el tamaño completo de la página

En firefox por ejemplo te pone una opcion para solo ampliar texto, la cual seria esta pero no el contenido de la página...

zerokilled · #4 (**permalink**) 06/08/2010, 10:49

tienes que asignar a la fuente unidades relativas, de modo que al cambiar el tamaño desde <body> todo el texto sea afectado.

gspablo · #5 (**permalink**) 06/08/2010, 12:39

pero por ejemplo mi página es un HTML creado a partir de un PSD con photoshop, entonces es una tabla dimensionada con imagenes dentro tambien dimensionadas, entonces mi duda es si vario la fuente le afecta a la página??

Cuando lo reduzco con Mozilla sale bien pero haciendo esto no lo se la verdad

zerokilled · #6 (**permalink**) 06/08/2010, 16:52

por supuesto, al variar la fuente afectara la pagina. mas especifico, afectara a todos los elementos con unidades relativas. las unidades absolutas se quedaran intactas.

gspablo · #7 (**permalink**) 07/10/2010, 01:40

Retomo el tema porque vuelvo a trabajar en algo similar.

He intentado mediante javascript coger el style.fontSize de varios elementos pero me devuelve "null" o mejor dicho vacio, y es que yo no he puesto ese atributo en ningún sitio por lo que supongo que mostrará eso.

Lo he probado con el ID de la tabla, también redimensionando las imagenes y la tabla pero al cambiarles de altura y anchura sale cada una por donde quiere

Pero cuando hago control++ y control+- en el navegador me la reduce perfectamente....

Os dejo un trozo de código ya que todo lo anterior que se ha sugerido no me funciona

Código HTML:

Ver original<table id="Tabla_01" width="1051" height="2001" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
        <td colspan="5" rowspan="3">
            <img src="productos/productos_02.png" width="472" height="64" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="productos/productos_03.png" width="94" height="48" alt=""></td>
        <td rowspan="3">
            <img src="productos/productos_04.png" width="17" height="64" alt=""></td>
        <td colspan="4">
            <img src="productos/productos_05.png" width="102" height="47" alt=""></td>
        <td rowspan="4">
            <img src="productos/productos_06.png" width="12" height="154" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="productos/productos_07.png" width="119" height="48" alt=""></td>
        <td colspan="2" rowspan="6">
            <img src="productos/productos_08.png" width="12" height="369" alt=""></td>
        <td>
            <img src="productos/productos_09.png" width="111" height="47" alt=""></td>
        <td rowspan="10">
            <img src="productos/productos_10.png" width="111" height="753" alt=""></td>
        <td>
            <img src="productos/espacio.gif" width="1" height="47" alt=""></td>
    </tr>
.................

zerokilled · #8 (**permalink**) 07/10/2010, 01:57

me sorprende que retomaras el tema. buscando por google encontre este tutorial, espero que te sirva http://mirificampress.com/permalink/...and_javascript

Cita:

He intentado mediante javascript coger el style.fontSize de varios elementos pero me devuelve "null" o mejor dicho vacio,

eso es porque estas leyendo directamente el estilo aplicado desde el atributo style de un elemento. para obtener dicha informacion tienes que leer el estilo computado. para ello usa la funcion getComputedStyle. ahora bien, en iexplorer dicha funcion no existe pero su equivalente es la propiedad currentStyle.

gspablo · #9 (**permalink**) 07/10/2010, 02:50

Perfecto, no encontre nada de eso, solo encontré donde ponia la otra forma de hacerlo que a mi no me valia

Lo he hecho así pero la página no me cambia...

Código Javascript:

Ver originalif(navigator.appName=='Netscape') 
{   
 var elem1 = document.getElementById("Tabla_01");  
 var style = window.getComputedStyle(elem1, null);  
 elem1.style.fontSize='25px' // Lo ago asi porque el elemento style.fontSize no puedo modificarlo
 
 var elem1 = document.getElementById("Tabla_01");  
 var style = window.getComputedStyle(elem1, null);  
 alert(style.fontSize); // Me muestra 25px que es el valor que le puse antes pero la página no cambia
}

Una pregunta sobre los navegadores, IE usa currentStyle, MOZILLA e CHROME usan la otra, para windows son los navegadores que se suelen usar. Pero para Safari cual de las 2 se usa? O solo IE explorer usa una distinta y para todas las demás se usa getComputedStyle? Lo normal seria probarlo pero no tengo MAC jeje

zerokilled · #10 (**permalink**) 07/10/2010, 03:13

me pregunto si fuistes capaz de leer el artículo del enlace.

de todos modos, las propiedades del objeto devuelto por getComputedStyle son solo de lectura. si intentas asignar un valor, se genera el error DOM Exception 7 (NO_MODIFICATION_ALLOWED_ERR). tienes que asignar el valor desde el objeto style del elemento en cuestion.

Cita:

Pero para Safari cual de las 2 se usa? O solo IE explorer usa una distinta y para todas las demás se usa getComputedStyle? Lo normal seria probarlo pero no tengo MAC

el sistema operativo no deveria importar. lo importante es el soporte de DOM del motor del navegador. en el caso de safari deberia funcionar igual que chrome puesto que ambos motores son los mismos, appleWebkit (KHTML like Gecko).

gspablo · #11 (**permalink**) 07/10/2010, 08:22

Pero en el ejemplo que he puesto arriba lo modifico en el objeto, en este caso la tabla, y la página no hace nada, lo aplico bien?

zerokilled · #12 (**permalink**) 07/10/2010, 09:00

razon llevas, me confundio al leer la variable style. al menos en esa porcion, no veo nada fuera de lugar. sugiero que: revices la consola de error del navegador en particular para determinar si se reporta algun error, o que subas el documento a un hosting e indiques la url. adicional, en que navegador no te funciona. por otro lado, yo no verificaria el navegador por nombre de aplicacion, sino por compatibilidad de funcionalidades. por ejemplo, un condicional que determine si una funcion estandar existe, digamos getComputedStyle.

gspablo · #13 (**permalink**) 07/10/2010, 09:08

Lo he comprobado en mozilla y chrome, lo de Ie no lo tengo hecho todavia hasta que no acabe con esto, pues en el ALERT ultimo me muestra 25px que es lo que le he puesto al elemento un poco antes

gspablo · #14 (**permalink**) 20/10/2010, 05:05

Sigo dandole vueltas al tema pero no hay forma. No veo ningun error en el código no se como puedo hacerlo...

Puede ser que no funcione porque en la tabla tengo en los elementos definidos la anchura y altura??

Código Javascript:

Ver originalif(navigator.appName=='Netscape')
  
      {  
   
       var elem1 = document.getElementById("Tabla_01");  
   
       var style = window.getComputedStyle(elem1, null);  
 
alert(elem1.style.fontSize) // No muestra nada
   
       elem1.style.fontSize='25px' // Lo ago asi porque el elemento style.fontSize no puedo modificarlo
 
       var elem1 = document.getElementById("Tabla_01");  
 
       var style = window.getComputedStyle(elem1, null);  
 
       alert(style.fontSize); // Me muestra 25px que es el valor que le puse antes pero la página no cambia
 
      }

gspablo · #15 (**permalink**) 25/10/2010, 07:39

Estoy viendo los atributos posibles de javascript para ello pero ninguno hace lo que quiero conseguir.

Nadie sabe como podria hacer como cuando se pulsa crntrrl++ y control+-??

He probado estas formas:

- En la etiqueta body creo id='body', luego por javascript hago un getElementById.style.fontSize, lo hace correcto pero la página no se modifica
- Lo he intentado mediante "parseInt(obj.style.fontSize)" incrementando por porcentaje, los porcentajes se muestran por alert correctamente pero la página sigue igual
- Vi otra forma pero no la entiendo muy bien "parent.parent.document.body.style.zoom" y ese valor lo multiplico por 1.4
- Mediante getComputedStyle, cojo los datos en esta funcion y lo aplico en un elemento, en este caso body, pero nada de nada...

Si lo hago mediante el explorador si funciona, asi que supongo que se podrá hacer...