Cómo agrandar y disminuir la fuente con jQuery

En este artículo, vamos a aprender algo sobre accesiblidad. Bueno, es cierto que muchas personas piensan que la accesibilidad no tiene mucha importancia en la web ya que casi todos los navegadores cuentan con la funcionalidad de hacer zomm in y zoom out en el contenido de la web. Ok, esto es muy cierto, pero en la mayoría de las páginas web, si utilizas la función de zoom del propio navegador, lo más probable que pase es que que arruines el diseño. Ese diseño por el que el administrador ha pagado y que da sentido al sitio web. Por lo tanto, en este artículo te vamos a mostrar cómo redimensionar única y exclusivamente el texto de un sitio web, sin influir en los elementos restantes del propio contenido.

Este tutorial se centrará más en el código Javascript. Es por eso, por lo que el HTML y CSS son muy básicos.

HTML

Muy bien, sólo tenemos que asegurarnos de que el nombre de la clase es correcto. Puedes darle mucho más estilo con imágenes y con un efecto hover para cuando se pose el ratón encima.

<a href="#" class="fontSizePlus">A+a> | 
<a href="#" class="fontReset">Reseta> | 
<a href="#" class="fontSizeMinus">A-a>

CSS

El CSS más corto de los que hemos publicado en programacion.net. Defino el tamaño de la fuente por defecto en 14px. No importa si has especificado el tamaño de la fuente mediante un porcentaje.

body {
	font-size:14px; 
	font-family:arial;
}

a {
	color:#c00; 
	text-decoration:none;
}

a:hover {
	color:#f00; 
	text-decoration:underline;
}

Javascript

Por último, ¡el mágico jQuery! No te asustes por la longitud, el 50% del código son comentarios y es muy sencillo.

$(document).ready(function () {

	//min font size
	var min=9; 	

	//max font size
	var max=16;	
	
	//grab the default font size
	var reset = $('p').css('fontSize'); 
	
	//font resize these elements
	var elm = $('p.intro, p.ending');  
	
	//set the default font size and remove px from the value
	var size = str_replace(reset, 'px', ''); 
	
	//Increase font size
	$('a.fontSizePlus').click(function() {
		
		//if the font size is lower or equal than the max value
		if (size=min) {
			
			//decrease the size
			size--;
			
			//set the font size
			elm.css({'fontSize' : size});
		}
		
		//cancel a click event
		return false;	
		
	});
	
	//Reset the font size
	$('a.fontReset').click(function () {
		
		//set the default font size	
		 elm.css({'fontSize' : reset});		
	});
		
});

//A string replace function
function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}

Fácil ¿no es así? Puede darle estilo al "Increase font size" y al "Decrease font size" con iconos para hacerlo más presentable. jQuery definitivamente ha cambiado la forma en la que programamos con JavaScript. Con Vanilla JS serías incapaz de lograr un código tan fácil y corto, ¿o sí?.