Botón para agrandar o achicar el tamaño del texto

ChatDelMundo · #1 (**permalink**) 07/07/2013, 12:59

Como instalo un boton para agrandar y achicar el texto de la web?

Como esta señalado aqui:

ggomez91 · #2 (**permalink**) 08/07/2013, 16:08

Con este plugin para jquery parece muy sencillo: http://www.jfontsize.com/
Pruébalo

ChatDelMundo · #3 (**permalink**) 09/08/2013, 21:08

Cita:

Iniciado por ggomez91

Con este plugin para jquery parece muy sencillo: http://www.jfontsize.com/
Pruébalo

No me carga la web

=(

hackjose · #4 (**permalink**) 10/08/2013, 11:43

Solo selecciona el body y con la propiedad style especificas el tamaño de la fuente
Esto va a funcionar siempre y cuando el tamaño de la letra sea el mismo y este determinado en body

Si hay varios elementos con tamaños diferentes debes seleccionar cada uno de ellos, para seleccionarlos puedes usar getelementbyid getelementsbytagname

salu2

lauser · #5 (**permalink**) 11/08/2013, 00:40

Código PHP:

Ver originalLo primero será crear tres enlaces que funcionarán como botones para aumentar, disminuir y reiniciar el tamaño de la fuente:
 
<a class=”aumFuente” href=”#”>Aumentar</a>
<a class=”disFuente” href=”#”>Disminuir</a>
<a class=”reiFuente” href=”#”>Reiniciar</a>
 
Lo siguiente será aplicarle el código necesario en el evento click de cada uno de los enlaces:
 
$(document).ready(function(){
// Reiniciar el tamaño de la fuente
var tamOriginal = $(‘html’).css(‘font-size’);
$(“.reiFuente”).click(function(){
$(‘html’).css(‘font-size’, tamOriginal);
});
// Incrementar el tamaño de la fuente
$(“.aumFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(tamActual, 10);
var nuevaFuente = tamActualNum*1.2;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
// Disminuir el tamaño de la fuente
$(“.disFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(currentFontSize, 10);
var nuevaFuente = tamActualNum*0.8;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
});

caricatos · #6 (**permalink**) 11/08/2013, 05:29

Hola:

Cita:

Iniciado por lauser

,,,Lo primero será crear tres enlaces...

¿Porqué enlaces si la pregunta no es sobre enlaces?

Ese es un vicio antiguo para que el cursor sea la mano de los enlaces, y esa manos con estilos es: cursor:pointer...

... Y también porqué librerías si solo se quiere modificar un estilo, en concreto font-size (para javascript fontSize)...

Para empezar debería estar definido el estilo para el body... creo que preferentemente en puntos o pixeles... y si quisieras tener otros tamaños usar medidas proporcionales como "em".

Un codiguillo rapidillo:

Código:

<html>
<head>
<style type="text/css">
body	{
	background-color: white;
	font-size:12pt;
}

h1	{
	font-size: 2em;
}
</style>
<script type="text/javascript">
	var tam=12;
	function agrandar	{
		tam++;
		document.body.style.fontSize = tam+"pt";
	}

	function achicar	{
		tam--;
		document.body.style.fontSize = tam+"pt";
	}
</script>
</head>
<body>
<h1>
	Hola
</h1>
<p>
	Texto de prueba (como el Lorem Ipsum)...
</p>
<button type="button" onclick="agrandar()">A+</button>
<button type="button" onclick="achicar()">A-</button>
</body>
</html>

Saludos