HTML - Crear boton que haga un zoom de la web (Ctrl+ o Ctrl-)

 
Vista:

Crear boton que haga un zoom de la web (Ctrl+ o Ctrl-)

Publicado por Jose (2 intervenciones) el 15/01/2018 10:49:10
Buenos días!

Lo primero decir que soy novato en esto y voy aprendiendo poco a poco de foros, webs, etc...

Estoy haciendo un pequeño proyecto web y me gustaría implementar en él un par de botones para que hicieran exactamente lo mismo que los navegadores web al pulsar la convinación de teclas: 'Ctrl+' o 'Ctrl-'

¿Conoceis algunha forma de "engañar" al navegador y que al pulsar un botón de la web piense que estamos pulsando alguna de estas combinaciones en el teclado?

Muchas gracias de antemano!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Crear boton que haga un zoom de la web (Ctrl+ o Ctrl-)

Publicado por Lopez (271 intervenciones) el 15/01/2018 14:19:54
Hola Jose,

Bienvenido a LWP.
No tienes porque "engañar", ademas ten claro que las funcionalidades del navegador están restringidas por seguridad,
de ser usadas libremente.
Una buena opción creo seria usar la propiedad transform disponible en CSS y aplicarla al body.
Es bastante compatible y fácil de usar. Te dejo un ejemplo usando jquery.

https://codepen.io/lowpez/pen/VyBqLO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#zoom-in').click(function() {
	updtZoom(0.1);
});
 
$('#zoom-out').click(function() {
	updtZoom(-0.1);
});
 
zoomLvl = 1;
 
var updtZoom = function(zoom) {
	zoomLvl += zoom;
	$('body').css({ zoom: zoomLvl, '-moz-transform': 'scale(' + zoomLvl + ')' });
}

Cuéntanos que tal,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear boton que haga un zoom de la web (Ctrl+ o Ctrl-)

Publicado por Jose (2 intervenciones) el 16/01/2018 23:25:12
Muchísimas gracias por tu respuesta!
La verdad es que, a veces es más fácil de lo que pienso y me complico mucho la vida, quizás por no conocer todas las órdenes y posibilidades de los lenguajes.
Encontré la orden transforn por aí y me curré el código en JS para que modificara el estilo del body con esta orden y va perfecto.
Lo dicho, gracias mil y perdón por tardar tanto en responder.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar